javascript - Scrolling to selected element while typing on iphone safari virtual keyboard - Stack Overflow

admin管理员组

文章数量:1313782

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?

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?

• javascript
• iphone
• web-applications
• mobile-safari

Share Improve this question Follow asked Jun 1, 2010 at 15:43 spinlockspinlock 23111 gold badge33 silver badges66 bronze badges 4

• I don't think there is a solution to this problem, it's similar to the problems inside textareas on the iphone as well - though the text area is far worse in that it will change your zoom ratio after you finish editing the content (which really sucks if you disable zooming because you want it to behave like a web app because you can't get back to the preferred zoom setting without closing the app.). – Marcus Pope Commented Apr 19, 2011 at 3:27
• 1 @ I'm not sure I agree with the ment above. If you are creating a web application you have to consider different behaviours from different web browsers including mobile ones - but in general I have not had problems with forms in the way described here on mobile safari. @spinlock are you designing a webapp specifically for the mobile browser or not? What SDK are you using? Dashcode or other? Are you allowing your container DIV to be scrolled? Does your page just fit the screen but doesn't scroll? Some of these answers may help us to solve your problem. – T9b Commented May 9, 2011 at 10:27
• Hey @spinlock did you manage to get the input fixed on one place while typing? Thanks in advance – scanales Commented Oct 10, 2013 at 0:22
• Please see my answer to the same question at stackoverflow./a/37639158/3151014. – t7tran Commented Jun 5, 2016 at 6:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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 e up.

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

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

本文标签： javascriptScrolling to selected element while typing on iphone safari virtual keyboardStack Overflow