Preventing an <input> element from scrolling the screen on iPhone?

javascript iphone web-applications safari jqtouch
Stefan Kendall picture Stefan Kendall · Jun 1, 2010 · Viewed 46k times · Source

I have several <input type="number"> elements on my webpage. I'm using jQTouch, and I'm trying to stay fullscreen at all times; that is, horizontal scrolling is bad. Whenever I click an <input> element, the page scrolls right, showing a black border on the right of the screen and de-centering everything. The inputs are offset from the left of the screen, and they begin somewhere toward the middle of the page.

How can I prevent this scrolling on focus?

Answer

Mischa Magyar picture Mischa Magyar · Sep 17, 2011

I just found the solution to this problem in this post Stop page scrolling from focus

Just add onFocus="window.scrollTo(0, 0);" to your input field and you're done! (Tried it with <textarea> and <input type="text" /> on the iPad, but I'm pretty sure it'll work on the iPhone too.)

I was afraid the scrolling would be visible as a flicker or something, but fortunately that is not the case!

Related questions

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I'm writing a web app for the iPad (not a regular App Store app - it's written using HTML, CSS and JavaScript). Since the keyboard fills up a huge part of the screen, it would make sense to change the …

Read More
iPad doesn't trigger resize event going from vertical to horizontal?

Has anyone noticed this behavior? I'm trying to write a script that will trigger upon a resize. It works fine on normal browsers, works fine on iPhone, but on iPad, will only trigger going from horizontal to vertical viewport, not …

Read More
How can I clear the cache of an IOS Web App on the Homescreen?

I am using JQTouch to create a Web App on the Homescreen using meta tag "apple-mobile-web-app-capable", but no matter how many times I clear the cache from within Settings, the Web App's Javascript is still an older cached version. Strangely …

Read More