iOS7 Detect keyboard height with Javascript?

Question

Now this issue has made it on here before (What is the height of iPad's onscreen keyboard?), but I think it needs a refresher due to iOS7 recently being released.

The issue: I have a fixed position modal that appears in the bottom right corner of the page. It has a single form field that gains focus when the modal opens. The focus triggers the softkeyboard to open. The problem is that I want to programatically detect the keyboard height to position the modal at the top of the keyboard, otherwise part of the modal gets cutoff from view.

What I've tried:

    var scrollHere = currentWidget.offset().top;
    //this scrolls the page to the top of the widget, but the keyboard is below.
    setTimeout(function() {
        $('html, body').scrollTop(scrollHere);
    }, 0);

The page scrolls to the top of the modal. Not ideal because sometimes the form field is hidden below the keyboard.

I have also tried alerting the window.innerHeight

    alert(window.innerHeight);

But that shows up to be the same whether or not the keyboard is visible.

So my question is, has anyone found a way to detect the iOS7 keyboard height in JavaScript? Might there be a workaround? Unlikely, but could this be a bug in iOS7 safari?

Any help would be appreciated. Thank you.

Answer 1

So the answer is, I was wrong about not being able to detect the window.innerHeight change.

The reason I couldn't detect the change was because on the iPad the keyboard animates up from the bottom and does not fire a window resize event. My solution was not to detect the window size, I made the body have a max-height of 100% when the modal is open. Then I wait for the user to focus on the text field and manipulate the scroll position at that point:

$(document.body).on('focus', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

This is for when you focus on your input field. iOS likes to try to center the window on the field when the keyboard opens, and that can be annoying if say you have information above the input the user needs to see. The example above scrolls the window so that my text field is right above the keyboard. You'd think that's all you need to do, but iOS sometimes tries to be too smart. When the user starts typing in the input, it re-centers on the input again! So we take the above code and make it into this:

$(document.body).on('focus keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

This way the scroll position never changes from where you want it while the user is typing.

Note: The only time I was able to detect the change in window.innerHeight was in the on keyup event because at that point the keyboard was done animating and fully shown on the page. On focus it still said the innerHeight was same as without the keyboard.