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

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).