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();
});
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.
Steps to reproduce:
Set-up a select2 dropdown in Tags mode.
Start typing a tag.
With the focus still in the drop down, using the mouse wheel, scroll to a different part of the page.
Now click somewhere.
Observed results:
You are scrolled back so the tagging drop down is in the viewport.
You can see this behavior in action on the projects demo page.
Expected results:
Clicking away from the tags dropdown should not affect scroll position.
This is particularly annoying in an app I'm working on because the Save button of a form is off screen. If the user enters a tag, then scrolls with the mouse wheel to the Save button (which IMHO a very intuitive flow when adding a new tag to an otherwise filled out form) and clicks the Save button, the click won't register on the button. Instead the user is auto-scrolled back to the dropdown with focus no longer in the drop down. Now, they could scroll again and click the actual button.
Anybody know how to fix this issue? I have no qualms with updating the source (already had to do so to fix other select2 quirks).
(FWIW, as of now I haven't logged a bug in the Select2 repo, since it seems questionable to me how actively it's being maintained)
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
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.
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 ?