How to capture the hide keyboard event on iOS using JavaScript
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.
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
I found a solution which works, although it is a bit ugly. It also won't work in every situation, but it works for me. Since I'm adapting the size of the user interface to the iPad's window size, the user is normally unable to scroll. In other words, if I set the window's scrollTop, it will remain at 0.
If, on the other hand, the keyboard is shown, scrolling suddenly works. So I can set scrollTop, immediately test its value, and then reset it. Here's how that might look in code, using jQuery:
$(document).ready(function(){
$('input').bind('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
});
Normally, you would expect this to not be visible to the user. Unfortunately, at least when running in the Simulator, the iPad visibly (though quickly) scrolls up and down again. Still, it works, at least in some specific situations.
I've tested this on an iPad, and it seems to work fine.
How to capture the onscreen keyboard 'keydown' and 'keyup' events for touch devices
Have you tried using key press instead of key down
$("#id").keypress(function() {
});
Updated :
Due to android problems I now normally wrap my checks like this
if ($.browser.mozilla) {
$("#id").keypress (keyPress);
} else {
$("#id").keydown (keyPress);
}
function keyPress(e){
doSomething;
}
Related Topics
How to Change the Viewport Meta Tag in Mobile Safari on the Fly
How to Measure the Space That a Text Will Take in JavaScript
How to Detect State of CSS Transition via Js and Skip It
Jquery Scroll Show Hidden Content
Write Custom Text on Image Canvas with Fabric.Js and HTML5
How to Detect Device Name in Safari on iOS 13 While It Doesn't Show the Correct User Agent
CSS :Hover on Mobile or Other Device as Toggle
Absolute Positioned Floating Header Jitters in Safari
Catch JavaScript Event in iOS Wkwebview with Swift
How to Get the Exact Rgba Value Set Through CSS via JavaScript
Amcharts - Line Chart Overflowing Graph Container
React-Native Updating List View Datasource
Highlight Multiple Items on Hover's Condition