10

In my webpage I have a text input field which gets covered by the keyboard in Windows 8.1 tablet.

I want the tablet to 'push up' the web page content (as it works on the iPad).

So: Is it possible to make the keyboard NOT covering my input field? And can I detect if a virtual keyboard is active with javascript?

Persijn
  • 14,624
  • 3
  • 43
  • 72
Mystogan
  • 547
  • 4
  • 21
  • This happens to me some times on mobile as well. Nice question. – Persijn Apr 17 '15 at 13:08
  • You might find your answer here: http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari – GreyRoofPigeon Apr 17 '15 at 13:35
  • @LinkinTED The answer uses the input focus event - but on the windows tablet you have to manually open the keyboard so I don't think it will work. Thx anyway tho! – Mystogan Apr 17 '15 at 13:46
  • But the input will still be focused right...? Instead of binding the action on the keypad, you could bind it on the input. – GreyRoofPigeon Apr 17 '15 at 14:35
  • @LinkinTED Focusing the input does not mean that the keyboard is opened - the only thing we know is that when keyboard is open the input is *likely* focused - input can still be focused without keyboard being displayed. – Mystogan Apr 20 '15 at 07:18

1 Answers1

1

You could get the relative position of the text field in comparison to the screen resolution and if the field lays on the 2nd vertical half (i.e. the space that covers the keyboard after appearing), scroll down the webpage for a fixed amount of pixels.

If you use jQuery, you could use the jquery.scrollTo plugin to scroll to the field with a vertical negative offset, so the field is always visible.

Plugin site: https://github.com/flesler/jquery.scrollTo

Hope this helps!

I have no Windows tablet to be sure of how the OS manages the keyboard pop-up, but this method has worked for me on Android and iOS.

pabloapa
  • 166
  • 2
  • 6
  • I was thinking in similar lines, but how do I know when to scroll? i.e. how to know if the keyboard is actually displayed (you can focus the field without having the keyboard shown - so e.g. deciding on input focus could result in a strange user experience) – Mystogan Apr 17 '15 at 13:38
  • 1
    On Android and iOS, the innerHeight of the window is reduced when the keyboard is shown. You could store the initial innerHeight on window load and check it inside the onFocus handler, and only scroll if the original innerHeight is greater than the current one. – pabloapa Apr 17 '15 at 16:15
  • It seem using a "docked" virtual keyboard will indeed make the window height appear smaller when displayed (rather unintuitive as the page appear the same)! This solves my issue, thank you! – Mystogan Apr 20 '15 at 07:28