iOS/iPad mobile safari - javascript trigger code before onfocus event for textarea opens on-screen keyboard

Question

I have a web application, that has a textarea inside a fixed position element that's docked to the bottom of the browser screen. Whenever the textarea is selected, if the browser is not scrolled to the bottom of the page, the textarea ends up about 30 pixels above the on-screen keyboard.

What I'd like to try is somehow firing this code:

Query('html, body').scrollTop(999999);

to scroll the document to the bottom of the page before the keyboard opens. Unforunately this does not fire before the keyboard appears:

jQuery('div#team_chat textarea').bind('focus', function(e){

    if(jQuery.isIpad()){
        jQuery('html, body').scrollTop(999999);
    }

});

NOTE: isIpad() is an extension I added to the jQuery object that detects if the current browser is an ipad.

Answer 1

This is the expected behavior from Ipad or any other mobile/hand held devices, that whenever the focus changes to an input/textarea element, the page scrolls to that element firing the open keyboard event. For your case you can try adding a setTimeout before scrolling the page to the bottom so that after the textarea is focused the default behavior of the browser takes place and then you can fire your scrollTop function.

jQuery('div#team_chat textarea').bind('focus', function(e){

    if(jQuery.isIpad()){
        setTimeout("jQuery('html, body').scrollTop(999999)",1000);//Here sis the change
    }

});