Phonegap iOS - prevent scrolling on input focus

Question

I am creating an iPad app using Phonegap. The app has a fixed landscape orientation and a menu running along the top, with a text box inside it on the top right. The app is a fixed (full screen) size and does not require scrolling.

When the user touches the text box that appears top right on iOS 6, the whole app slides left in order to place the text box in the centre of the screen, pushing the whole app left and leaving a blank space on the right.

How do I prevent this behaviour?

I currently have UIWebViewBounce set to NO and the following code in place to catch touchstart events:

document.body.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

I also have this on the text box itself, which seems to work on iOS 5 (albeit with a stutter) but not on iOS 6:

$('#searchText').on("focus", function(event) {
    window.scrollTo(0, 0);
});

Any help greatly appreciated.

2023 solution here: https://stackoverflow.com/a/76731361/480608. However, it may need to be adjusted to find the horizontal center rather than the vertical center since your app is in fixed landscape mode. — Raine Revere, Jul 20 '23 at 15:31

score 3 · Answer 1 · answered Jan 01 '15 at 10:07

3

Try adding this javascript in an onfocus attribute in the input that you don't want to shift when being focused:

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

answered Jan 01 '15 at 10:07

131

1,363
1
12
32

1

THANK YOU SO MUCH. I've had this friggin problem for iOS HTML app development, for about over 2 years!!! I've tried everything from JQUERY to iScroll to other javascript library crapolies. Thank you so much, an answer to my long life quest for an answer. Will accept once I'm able to. – Ilan Kleiman Jan 01 '15 at 10:14
YOU ARE WELCOME XD LOL – 131 Jan 01 '15 at 10:15
After updating Cordova & Phongap to latest versions, it appears that your fix no longer works... lmao – Ilan Kleiman Jan 19 '15 at 23:03
Just kidding. I'll find something – 131 Jan 23 '15 at 08:32
Aight still waiting on ya buddy – Ilan Kleiman Aug 27 '15 at 02:39
You still waiting for an answer? – 131 Feb 13 '18 at 09:40
this work to get from an input the other but it doesn't work when I try to use backspace and go back to the previous input, here it makes my screen jump – AnaCS Nov 08 '18 at 16:22

score -1 · Answer 2 · answered Jan 14 '13 at 22:38

-1

Try to add the following css styles to your body elemnt:

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none;
 user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);

It prevents user selection on links and other stuff. Maybe it will be helfull for you.

answered Jan 14 '13 at 22:38

kreig

990
11
18

This doesn't work for me I'm afraid kreig - sorry, but thanks all the same. – colin Jan 15 '13 at 19:28

Phonegap iOS - prevent scrolling on input focus

2 Answers2