Minor bug I'm trying to fix on Android devices accessing a site.
Flow goes like this:
User inputs text, list returns answers.
User clicks li element, is scrolled to the next page (ng Anchorscroll).
User is then at the top of next page, and can enter next input.
This is fine on iOS and web, but the keyboard is blocking on Android.
I hope this doesn't violate SO terms, but here is a video of the problem with my web app (I won't upload the code).
https://youtu.be/YwXRV_APMOQ
I have tried using conditions such as ‚ "if Androiddocument.activeElement.scrollIntoViewIfNeeded();
On resize $(input).focus();, and even onclick="window.location.href="#destination"
But none are working.
Looking for some sort of work around or help, thanks! :)
Found a work around. On click, focus on the next input. This pulls the input into the screen on Android, which is the behaviour needed.
(I've used Angular method, but can you any language)
How to set focus on input field?
Related
Currently working on a solution which uses same solution for both mobile and desktop web. However, a issue arises when user clicks on link which should take user to a new component, instead it only hides the virtual keyboard and keeps the user on the same view. This is not constant. Happens every now and then.
Problem: don't know how to even capture this issue on debugging. The problem only occurs when I try on a physical phone(only tried with chrome on Android). Not on chrome browser with mobile view.
Tried to point down to the component where it might be occurring. But no idea where to pin point the issue?
My code can be viewed here
This seems like it could be a bug, but as with all things i'm sure there is also a work-around. The problem description is this; using cordova to develop an android app with a simple page with some textfields, when typing into those fields on the app the softkeyboard appears so that you can enter text, but then when you either "enter" or focus on another element, the keyboard fades away but leaves the "ActionBar" at the bottom of the view.
The ActionBar remains, and if one's app is designed to run full screen - the action bar may overlap app content. The ActionBar itself cannot be swiped down or removed by the end user except for swiping down from the very top (the title bar) then swiping back up again.
This seems to be an issue as of Android 6.0.0 or perhaps I just wasn't noticing it before.
I've noticed that with the plugin cordova-plugin-dialogs that when i use the alert dialog after i close it, the actionbar hides, but I think that ultimately the scenario that would work best is that after X-timeout from typing in a textfield and/or the softkeyboard fades out, the ActionBar should fade out too.
Any suggestions on how to manage the Android ActionBar in PhoneGap - I've seen some other similar questions but generally asking how to show it, seems like getting it to hide is less popular?
After much searching I was able to determine that the phonegap fullscreen setting doesn't necessarily give way to full "immersive" mode by default. After adding the plugin cordova-plugin-fullscreen and setting the immersive mode from the plugin, I was able to resolve this issue.
https://www.npmjs.com/package/cordova-plugin-fullscreen
I am developing a hybrid app using Worklight, and I am experiencing the following issue:
When the user clicks on an input field, the soft keyboard that pops up hides the input field when the latter is relatively low on the screen. The page is scrollable, so the user can scroll and see the field again, but the customer requirements define that the page will auto-scroll until the field is visible.
Please note that this happens only in the Android environment. In the iPhone and iPad environments the default behavior is the the desired one.
Based on my findings, the trick should be done via the android:windowSoftInputMode attribute in the Android manifest file. However, all my efforts there failed to achieve the auto-scroll.
If there is a solution that is Worklight specific, I would prefer to use it, rather than intervening in the Android native code.
This isn't really about Worklight at all... but about web apps in general in Android, it seems (from a quick search in Stack Overflow).
Here are some suggested solutions, that differ from yours:
Textbox hidden below keyboard in Android webview
html textfield in WebView in an Android application is hidden by the soft keyboard
Keyboard hiding EditText when android:windowTranslucentStatus=true
You could possibly also use iScroll.js (lite edition) - or implement this yourself by catching the focus event - to scroll a specific amount of pixels upwards.
I am creating hybrid application with help of phone gap which supports in iPad.The iPad version is 6.1 . My issue is Whenever i tried to enter values in fields using default iPad keyboard, my web page is moving little bit upwards then if i click any button in application page with out manually closing the keyboard my page is messing up.
What i tried is when ever i click my page button while keyboard is opening i just fired window.scrollTo(0,0).But in some scenarios this fix is not helping.So please any one help out to resolve this issue.How can i hide the keyboard by code or its great if any one give other ideas using HTML5..If Thanks in advance
I am creating an app in IOS/android with phonegap/cordova framework. I have a set of input types like input boxes, picklists, etc. How can I set the return key to work such that it focuses on the next input box when pressed. I have tried to use javascript in phonegap like:
document.getElementByid('nextElement').focus();
on return/enter; But it does'nt seem to be working ie. focus is lost from the current element but the soft keyboard is vanishing and focus is not coming to the next element. Any idea of where am i missing?
After some googling, it turns out this is not possible on Mobile Safari (although desktop WebKit works).
You can set focus on next element, but soft keyboard won't appear at all.
Here's the PoC of this: http://www.hakoniemi.net/labs/focusOnNext/