Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

People also ask

How do I stop the virtual keyboard from popping up on my iPad?

While the following setting is typically associated with using a mouse with your iPad, you can try turning off the 'Show Onscreen Keyboard' setting in Settings > Accessibility > Touch > Assistive Touch.

Why is JavaScript not working in Safari on iPad?

To enable JavaScript on your iPad or iPhone choose Settings, Safari and Advanced; to adjust Cookies choose Settings, Safari and uncheck Block Cookies. To choose another browser, such as Chrome instead of the default Android browser, can also resolve the problem.

How do I get an onscreen keyboard on my iPad?

Go to Settings > Accessibility > Keyboards, tap Full Keyboard Access, then turn on Full Keyboard Access.

Does iPad have virtual keyboard?

The iPad has a built-in virtual keyboard that you can use to input text on your device. Although you can purchase a physical keyboard to attach to your iPad, the virtual keyboard has everything you need, including convenient shortcuts to make typing easier.


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.


You can use the focusout event to detect keyboard dismissal. 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.


If there is an on-screen keyboard, focusing a text field that is near the bottom of the viewport will cause Safari to scroll the text field into view. There might be some way to exploit this phenomenon to detect the presence of the keyboard (having a tiny text field at the bottom of the page which gains focus momentarily, or something like that).


maybe a slightly better solution is to bind (with jQuery in my case) the "blur" event on the various input fields.

This because when the keyboard disappear all form fields are blurred. So for my situation this snipped solved the problem.

$('input, textarea').bind('blur', function(e) {

       // Keyboard disappeared
       window.scrollTo(0, 1);

});

hope it helps. Michele