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.
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))"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With