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 ?
Related
I am using flutter_inappwebview to open webview in flutter app.
My use case is, I want to open keyboard as soon as user enters in the webview. The page that I am loading in webview already has a focused input field but the keyboard does not open automatically.
I have to tap on the input field (in the page) in order to open the keyboard. If I load the same page on web-browser, it works fine and shows focused (with cursor) input field.
Some observation that I had - If I interact with web-view and come back to that page, keyboard opens up automatically. So it seems, we have to do some user interaction (real, not programatically) in order to focus element in page.
How to focus by default the webview to let me programmatically set the focus on a specific webview input? Or Is there any thing that can be done in web-page to open keyboard? Thanks in advance.
I have tried everything in web-page to open the keyboard like adding focus only when page is fully loaded. This was done in web-page, not from flutter side. But it does not open the keyboard, just leaves the input field in focused state (but cursor does not appear).
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.
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'm programatically focusing a input text element upon clicking a button.
But in android devices it soft keyboard is popping out on focusing the input element.
Is it possible to hide the soft keyboard in android and still retain focus with JavaScript as I'm inputing the data via scanning bar code and not via soft keyboard?
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();
});