Body change size due to on screen keyboard after javascript form submit on mobile devices (ipad)

Hi all,
Today I encountered a strange issue, after opening the on screen keyboard, filling a form and sending it with the keyboard (via javascript which involves no page reloads), the body kept the size of the page plus the size of the keyboard, totally unexpected.
I found a nice hack to avoid the issue and since it works flawlessy it’s worth an article:

I tested this on iPad, I was working on an app for this specific device, what you have to do is first add a javascript trigger on the body:

<body onResize="onResize();">

then add this function:

<script type="text/javascript">            
    function onResize(){
        $('body').css("height", page_height);
    }
</script>

page height could be anything, in my case it was a fixed value (1536px, iPad retina display height) but in your case could be a container height, window.innerHeight or anything you want.
Of course you already noticed that this involves every resize, but the function could target only mobile devices with little JS, for instance:

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
   ....
}

and the job is done!

2014/02/26

POSTED BY Jonathan Argentiero