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

Answer 2

As far as I know the problem your getting is that when the keyboard launches, the browser is trying to move the window into view of the element itself.

What might be happening is that the scroll bar position is being recorded before the keyboard pops up. The browser is then calculating the distance the window needs to move to bring the element into view, once the keyboard has popped up, based on the recorded value. By which time you have changed the position of the window. So it's moving the window relative to the position you set as opposed to the position it thinks it's at.

What is behaviour are you experiencing if you don't try to scroll the element into view manually ( no scripting )?

I'm under the impression the iPhone browser natively does what you want. If not it might have something to do with element positioning. I.E. The browser can't properly calculate the position of the element e.g. If it's in a fixed position container ( because it's location is going to move as soon as the browser tries to scollTo it ).

If that fails maybe try putting the scrollTo function inside a time-out so it fires after the keyboard has come up.

Answer 3

This might work, try to use css translate3d instead of scrollTo(x,y)

See http://www.webkit.org/blog/386/3d-transforms/