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
Related
I've build an Android app using CapacitorJS and I want to disable the native webview's swipe navigation (swipe from edges to go forward/back). Is that possible?
Can this be done through Javascript or an HTML meta tag? As far as I can tell this is not possible.
Is there a Capacitor plugin or setting to do this? (Ionic, which uses Capacitor, has the swipeBackEnabled setting that sounds like it does what I'm looking for)
If not, can it be set on the Android WebView directly?
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've tried this old solution but it doesn't work.
I'm using android 4.4 which has a major update for the web view widget. My web application is based on jquery mobile
When I click on a link in my web application, the web view put an orange border on the active link.
You can specify outline: none; in your CSS to hide the focus ring. Here's some more information: http://devtacular.com/articles/bkonrad/how-to-remove-chromes-orange-outline/
However, be aware that users navigating using a keyboard may be relying on the orange outline to indicate which element currently has focus, so you should consider providing some other affordance for them.
I am developing android application using cordova 2.4
Problem is keyboard overlap screen instead pushing application up.
My text field hide behind phone keypad.
Please share if any one know solution for this.
Check into adding this to your activity xml:
android:windowSoftInputMode="adjustResize"
There are some good tutorials out there like this one: http://blog.vogella.com/2010/10/25/android-windowsoftinputmode/
This particular questions has been asked many times as well, see here: Android soft keyboard covers edittext field
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;"/>