iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari

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.

Safari on iOS, is there any event before virtual keyboard pop up?

Have you tried on checking mousedown / touchstart which occurs before the focus? Just check whether the event.target.nodeName.toLowerCase() is "input" or "textarea" when it's dispatched.

I've also created https://github.com/zvona/Servant.js, which is an initial version of advanced keyboard handling. It supports "keyboardshow" but not "beforekeyboardshow". I'll check whether it can be implemented and to help in your case.

.

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.

---

Related Topics