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

by

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.

More Related Contents:

  1. What is the difference between screenX/Y, clientX/Y and pageX/Y?
  2. javascript scroll event for iPhone/iPad?
  3. Check if URL scheme is supported in javascript
  4. How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
  5. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  6. iPad/iPhone browser crashing when loading images in Javascript
  7. Why can’t JavaScript .play() audio files on iPhone safari?
  8. Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
  9. Strange behavior of select/dropdown’s onchange() JS event when using ‘Next’ on Mobile Safari Dropdown list item select box
  10. Difference between onbeforeunload and onunload
  11. Manually triggering the iPhone/iPad/iPod keyboard from JavaScript
  12. javascript window.open in safari
  13. How do I hide the address bar on iPhone?
  14. How to open Safari from a WebApp in iOS 7
  15. How to decide when to use Node.js?
  16. onclick function runs automatically
  17. Difference between the ‘controller’, ‘link’ and ‘compile’ functions when defining a directive
  18. Does overflow:hidden applied to work on iPhone Safari?
  19. Date parsing in javascript is different between safari and chrome
  20. Mobile Safari back button [duplicate]
  21. Open Safari / Google Chrome developer tools programmatically from JavaScript
  22. javascript large integer round because precision? (why?)
  23. Is there a way to enable the JavaScript Error/Debug Console for Safari within Android?
  24. Auto-Full Screen for a Youtube embed
  25. Eliminate 300ms delay on click events in mobile Safari
  26. Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
  27. iphone/ipad triggering unexpected resize events
  28. How can you read a file line by line in JavaScript?
  29. Google Script HTML form from Library throws error Uncaught
  30. What happens to JavaScript code after app is compiled using Titanium Mobile

Leave a Comment