I'm building a web site app that will be used from Android devices. At the moment, the browser squashes the page when the soft keyboard appears. I rather want it to scroll the page up.
I've read that the property android:windowSoftInputMode in AndroidManifest.xml can be used for Android apps, but I'm looking for an equivalent for a web site.
You can reposition the browser when the user focuses on this input
<input name="whatever" id="id" onfocus="window.location.href='#id'; return true;"/>
Related
On my PWA, for input, native keyboard of the phones are active. Need code for following usecases
1. How to disable autocorrect for PWA for android and iOS?
2. How to build your own keyboard without auto correct for PWA for android and iOS?
Try using following code with you input field inside form element :-
autocorrect="off" autocapitalize="none" autocomplete="off" spellcheck="false"
I think making your own keyboard is not a good idea as it will take much time, if you want to have your own virtual keyboard(i hope for security reasons you are doing this) you can use open souce javascript plugins for the same.
I have a simple MobileFirst hybrid app with only html/JS. On iOS7, when inputting data for a widget near the bottom of the screen, the widget becomes covered by the soft keyboard. This happens only for the app. If run it in mobile browser, it doesn't happen.
On Android4.4.2, it happens in both mobile browser and the MobileFirst app. Noticed on Android, there is AndroidManifest.xml file for MobileFirst app, so tried setting android:windowSoftInputMode="stateHidden|adjustResize", that doesn't help. Is there any way to fix this problem?
For Android, try a combination of both:
Try the following suggestion (from: How to auto-scroll to input field in Android when the soft keyboard overlaps them on showing?). Add
android:windowSoftInputMode="adjustResize" in AndroidManifest.xml, and
height=device-height in the meta viewport tag in the HTML file's HEAD element
For iOS:
You could use iScroll to scroll a bit when the specific element is focused so that it will be seen (see: $.mobile.silentScroll does not work in worklight app), or
You can try the suggestion provided here: Textfield does not focus in UI WebView in iOS7
I put a WebBrowser component in my app because I have to display a webpage. The webpage also contains an input box.
<input name="nome" style="width:160px" type="text" />
This is the HTML code I wrote. By the way, when I click on it with my Samsung device because I must type some text, the keyboard doesn't appear.
What could I do?
You can see the webpage here: click
It's a known limitation of the web browser component.
It's doubtless findable in Embo's QC database.
It's pending a fix, I gather.
<checks>
Oh yes, here it is: QC 119313
Also documented in the Delphi XE5 Release Notes
I have a index.html page..
The contents in it are 2 textboxes username and password.
What I need is on page load itself get the focus on to the first textbox and show softkeyboard...
I would like to get it in jquery mobile,also would like to know how it is done for kendo as well?
It cannot be done using purely JavaScript unless there is phone gap, refer this below link
jQuery Mobile Show Keyboard on Input Focus
For autofocus feature you can either use native feature of HTML5 by giving autofocus attribute to input
<input name="username" autofocus>
On my iPhone when the virtual keyboard pops up for a form field, there are some navigation buttons showing up at the top of the keyboard, which are: "previous", "next", "done". (And sometimes "autofill").
This is apparently the Mobile Safari "form assistant" and it also appears on the WebView in my application.
Is there anything similar for the Android WebView? Any third-party solutions?
I don't think Android supports this natively.
You probably need to implement your own navigation which would probably be easiest as part of your web page.