Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Phonegap iOS - prevent scrolling on input focus

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.

like image 434
colin Avatar asked Jan 14 '13 22:01

colin


1 Answers

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))"/>
like image 93
131 Avatar answered Oct 21 '22 19:10

131