CODEWITHSUNDEEP
javascriptiphoneweb-applicationsmobile-safari
spinlock
spinlock

Reputation: 231

Scrolling to selected element while typing on iphone safari virtual keyboard

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?

Upvotes: 12

Views: 5790

Answers (3)

AshHeskes
AshHeskes

Reputation: 2324

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.

Upvotes: 0

user227353
user227353

Reputation: 2742

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

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

Upvotes: -1

Tomas Reimers
Tomas Reimers

Reputation: 3292

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

Upvotes: 3

Related Questions