How to capture the hide keyboard event on iOS using JavaScript - javascript

I need to do some resizing of the content of a web page when the hide keyboard button is pressed on an iPad virtual keyboard. Which JavaScript event is launched when the keyboard is hidden?

You can use the focusout event. It's like blur, but bubbles. It will fire when the keyboard closes (but also in other cases, of course). In Safari and Chrome the event can only be registered with addEventListener, not with legacy methods. Here is an example I used to restore a Phonegap app after keyboard dismissal.
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
Without this snippet, the app container stayed in the up-scrolled position until page refresh.

Here is a good place to start List of supported Javascript events on iPad
which leads to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
which does not list it.
This one gives a work around iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

window.onblur = function(e) {
window.scrollTo(0, 1);
};
This is my solution, which works fine, if someone pressed the "closekeyboard" for iOS 14.7 .

Related

How can I make the keyboard trigger resize events in mobile web browser on iOS?

I am writing a single-page web app in HTML5/Javascript (basically a telnet terminal). It is using text input a lot, so most of the time the software keyboard will be visible on touch devices.
It seems that on iOS (iPad with latest iOS) showing the software keyboard does not resize the page and does not trigger a resize event (in Javascript), causing half of my app's output to be off screen.
Is there any way of changing this default behavior on iOS (maybe with a meta tag, or the like) or is there some other event I can use? I would like to receive a resize or other event whenever the keyboard is shown / hidden and thus the viewport size chages.
How about you try .focus()? If your input gets focused you can trigger resize:
$('#input').focus(function() {
//do resize
});
More info on .focus()
http://api.jquery.com/focus/

How to handle mouseover and mouseleave events in Windows 8.1 Touchscreen

In my asp.net project, I have written javascript functions on mouseover and mouseleave/ mouseout events of buttons and some other controls. Previously this website was used on non touchscreen devices. But now when I am trying to access the same website on Windows 8.1 , on Internet Explorer 10/11,the problem is, after touching a screen mouse click event is fired (which is ok in my case)and when I remove finger on screen, mouseleave event is fired (which is problematic e.g. dropdowns are not working properly after mouseleave events fired). This Problem arises only in Internet Explorer 10/11. And the site is working fine with all its functionality on Chrome. Is there any JQuery Plugin or some other solution for this problem? Please reply soon. I need this very urgently.
Thanks in advance.
Add aria-haspopup="true" attribute to element triggering dropdown showing/hiding.
https://msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx

HTML Button in iFrame does not work properly on iPad

I have a web application in which I have a div element with an onclick javascript action. This web application works fine on iPads and desktops alike.
When it is launched within an iFrame on an iPad, however, all of the sudden, my clicks/taps are rarely and inconsistently acted upon. When running in an iFrame on a desktop browser, I do not see this behavior.
Has anyone seen this type of behavior before?
I'm not sure about your exact situation, but I was having a similar problem when my botton had a "mouseenter" event trigger binded to it. The mouse enter would be called on the first "tap" and the button would be called on the "second". Because of the way ipad uses those two events.
My solution was to use the browser detection tool from http://detectmobilebrowsers.com/ and set a var ismolible = to true or false, depending on whether the browser was mobile or not, then I used an if statement to unbind my mouseenter immediately if the browser was mobile. You do have to modify the http://detectmobilebrowsers.com/ code for ipad.
Hope this helps!

Javascript touchend event will not fire on Android

I'm trying to use the touchend (or the taphold event, both wont fire) as specified by jquery mobile. I'm developping an app for android using the phonegap platform. My AVD runs Android 4.0.3, and my phonegap version is 1.3.0.
As im using phonegap, i'm coding in javascript, and the objective is to recuperate the text selected by the user after a longpress on a word with the following code.
var selectAction = function(){
LOGGER.log('event.js : selectAction');
};
function selectMobile(component){
component.addEventListener('touchend',selectAction,false);
}
It actually works fine, if I tap relatively quickly, the event will fire up and I can get the log message. However, a rapid touch will not select text (I have more code taking the selected text but this is not the issue)
When a user long presses in Android, a default ''Action Menu'' pops up, and this seems to block further events from firing up. Because of that, I never get into my selectAction when actual text is selected.
Does anybody know how to properly get selected text in an html/javascript on an Android platform ?
Thank you very much.
It's could be related to below bug.
http://code.google.com/p/android/issues/detail?id=19827
try catch touchmove and call e.preventDefault()

Google Chrome touch events not firing

I'm building a touchscreen kiosk using Chrome (7.0.536.2 dev) in kiosk
mode on a Windows 7 PC with multi-touch display.
I can see that the ontouchstart event is available (by inspecting the
window object in Webkit Web Inspector) but it never fires. If I write
the following code, the onclick event fires when I touch the screen
but the ontouchstart event doesn't.
window.onclick = function() { alert("click"); }
window.ontouchstart = function() { alert("touchstart"); }
In Firefox 4 the MozTouchDown event fires without any problems.
Are these events not yet available to JavaScript?
I experienced this when developing an iPad webapp and tried to test it in Chrome. It turned out, that Chrome recognizes those events, but does not fire them at the moment. This is a bit frustrating, since it breaks support detection in JavaScript.
There is a command-line switch to enable touch events, change your shortcut adding "chrome.exe --enable-touch". Unfortunately, if ('ontouchstart' in window) returns true then, event is never fired. Just tested this on a Windows7 touch-enabled tablet on canary channel. Disappointing... !
as of chrome 20, you can enable touch events from the "about://flags" internal experiments webpage
I did notice that this breaks fastClick, if you're using that - I was :)

Categories