Scrolling to selected element while typing on iphone safari virtual keyboard

Question

I am building an iphone webapp and have a page with an input field. I'd like the field to scroll up to just above the virtual keyboard when it shows up. I've tried putting a scrollTo(x,y) on the input focus event (i.e. just before the keyboard shows up), but when I start typing the page scrolls up again (presumably based on the default mobile safari behavior). I also tried setting keypress event handlers, but preventing propagation of those events just disabled the keyboard, although it did prevent scrolling.

Is there any way to force the page to be at a particular position (with the input field just above the keyboard) when the virtual keyboard shows up, and not have it move when i resume typing?

Answer 1

Ok, so this is probably the worst hack you will ever see, but it beats nothing.

What you could do is change the position of the text box dynamically (using javascript) to fixed, position:fixed, this will change the position of the textbox to be relative to the browser window instead of the page. This should render the Iphone's scrolling irrelevant and your text box should be at the top of the page no matter what. Then onBlur, the css position is set to relative again (which should put it back in its place).

To make this prettier you could put a div behind the textbox onFocus so it hides the actual site content, and you could center the textbox using the top and left css properties (just make sure to clear those too onBlur).