3

I have a full screen web page which has an input field. When the user touches the input field, the Windows 8 on-screen keyboard appears. This behaviour is expected and necessary, but because of the keyboard, the input field is covered.

I want to be able to detect when the Windows 8 on-screen keyboard is present using Javascript so that I can handle moving the input field above the keyboard.

The input field is absolutely positioned on the screen, so the on-screen keyboard doesn't seem to alter the way in which the window sizes are stored.

Any and all information regarding this will be greatly appreciated.

Edit: I would also like to do this via Javascript because then I can move the input field back when the keyboard is dismissed (which might not be handled through a window press as it can be dismissed via the keyboard itself).

Nathan White
  • 1,082
  • 7
  • 21
  • 1
    cant we assume that any click on the input would trigger the keyboard? you could attach a handler to the input whenever its focused move it up, when its blurred move it back down... – Banana Oct 23 '14 at 15:06
  • @Banana, it is definitely a possibility, but I was hoping for a more portable, reusable solution. However, I will use this if I can't find another way :) – Nathan White Oct 23 '14 at 15:10
  • Does the keyboard appearing trigger a `resize` event? Does `window.height` or `document.height` change? I haven't tested this, it was just a curious thought (and just a wild guess). – gen_Eric Oct 23 '14 at 15:22
  • @RocketHazmat, I can only assume not as the absolute positioning of the input field doesn't change. I will test it and come back to you. – Nathan White Oct 23 '14 at 15:23
  • 2
    My Google-fu found this: https://code.msdn.microsoft.com/windowsapps/keyboard-events-sample-866ba41c and this http://msdn.microsoft.com/en-us/library/windows/apps/hh700405.aspx Not sure if this is for Win 8 apps or webpages, but maybe it's helpful? – gen_Eric Oct 23 '14 at 15:23
  • 2
    @RocketHazmat, my Google-fu also found that, but it looks like a Windows Store app, not a standard website. Thanks though! – Nathan White Oct 23 '14 at 15:25

1 Answers1

0

Could this be of help?

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

$(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 ');
   });
});

I know it's for iPad but I guess there could be some workaround for a normal browser maybe? Not my own idea it came from @LKM and I don't fully understand it anyway.

Community
  • 1
  • 1