Here's the scenario:
Open the website in Safari on an iPhone
Click/tap on an input text field
The window scrolls to vertically center the field in the viewport (fine)
Type the first character using the keyboard
iOS scrolls to the top of my page whereas I'd like it to stay as it was at step #3
I'm using jQuery, and tried a lot of different solution without success.
All I've learnt from this is that if I preventDefault() the event on keydown or keypress then it's not scrolling to the top, but there's no text in the input (obviously). When I try to do something like: this.value = this.value + String.fromCharCode(e.keyCode); it scrolls up again.
I tried to cancel the scroll event without success as well.
Related
When clicking on an an input type=text, a keyboard comes up. Unfortunately, that changes the height of the web page, so that all the thinks that were "stickied" to the bottom of the page want to come up above the keyboard.
And, in my case, the element that's anchored to the bottom of the page (e.g. the Apply button below) ends up covering the next input element (e.g. Max textbox), so that when the user presses Next on the virtual keyboard, you can't see it at all because the button is still covering it.
My question is whether there is any way to prevent the keyboard from changing the height of the page?
P.S. On iOS it works like you would expect. Bringing up the keyboard doesn't change the dimensions of the page.
It is default behavior on Android devices. As I know, you can not prevent this.
So I am using this plugin to prevent the whole webview from scrolling to the correct place on keyboard show when clicking on an <input> or <textarea> by doing:
cordova.plugins.Keyboard.disableScroll(true)
This works well, but I would like to be able to move it to the right spot manually, within the page using javascript/css. I assume it's a combination of using offset().top, while also adding more padding if the page height is too "short" and goes under the keyboard.
I've got a navigation remaining fixed when the page is scrolled,, it includes a search field, but when I'm trying to focus on the field while the page is scrolled, the keyboard pops up and forces a page scroll to the top of the page, and I'm not able to write anything there... I'd like to prevent that iOS autoscroll event..
Thanks
I have a web site with an input field.
When the input field is focused, the iPad keyboard shows up and the page scrolls up automatically. When the keyboard is dismissed, there's no scrolling back to the original position.
Is it possible to programatically disable this behavior (the scrolling) using javascript and/or css ?
I have made a HTML page. This page is smaller than Iphone screen. Let's say this is login page. The page contains text input fields.
I disabled scrolling the page this way:
document.ontouchmove = function(e){
e.preventDefault();
}
That code prevents scrolling, but when I tap an input field and drag, than the page is scrolling anyway.
Is there a way to completely disable page scrolling in HTML at iPhone?
The user can always scroll to the top by touching the status bar, so the best way to prevent scrolling is to keep scrolling. Put window.scrollTo(x, y) in a setInterval, and whenever the user scroll the page you can scroll it back to the right position.
When the user click on an input field, Mobile Safari might scroll up a bit to avoid keyboard covering the input field. Make sure that you scrolling behavior won't get the input field covered by the keyboard.
It worked for me
$("body").bind("touchmove", function(e) {
e.preventDefault();
});