When user selects input field, keyboard comes up but the input field text is right on top of the virtual keyboard.
Problem gets worse when it is a textarea because keyboard wants to focus on the first line only not the entire textarea box.
In my AndroidManifest.xml I tried changing android:windowSoftInputMode='adjustPan' but did not help.
EDIT -------------------
Using Rhomobile, Jquery Mobile and iScroll
Form is in a data-role="footer" data-theme="b" data-position="inline" div tag to make it stick to the bottom of the view.
<input class="imInput>" name="im[the_message]" type="text" maxlength="100"/>
No matter what I do the keyboard lines up with the bottom of the text. I have tried making line-height larger, padding, etc. nothing works.
How Can I make the keyboard line-up to the bottom of the field?
I would recommend this article about the various input methods to see what would work best for your app. Otherwise it is hard to say what is going on without understanding your app better with code, etc. If not that, than this post seems to be somewhat similar to the problem that you are having.
Related
I have a webview of a form in an android app, but the problem is that when I open up the keyboard to type, it covers the other input fields. for the fields near the top, i can click on to type, but the last field is entirely covered by the keyboard, such that if I lower the keyboard and click on the input field in the webview, the keyboard will cover the field (I can type in it, but not see what I am typing)
does anyone have thoughts/guidance/resources on how to approach this problem?
alternatively, does anyone know how I could do something like the following: when I click a input field in a webview, for the keyboard to show right below the field for each field on the page.
I've seen some resources around adjustPan and adjustResize in windowSoftInputMode, but that didn't seem to solve it for me, though I could still be wrong. I am working with an sdk that gets the webview up, so there could be indirection that I am missing.
About a week ago I noticed that Android Chrome was showing a password autofill bar above the keyboard in my app (Parchment). The HTML for the <input> is the following, which is definitely not a password input:
<input aria-hidden="false" autocapitalize="off" class="Input LineInput" type="text" maxlength="120">
Does anyone know what would make Chrome think that the password autofill bar should be displayed, and what can be done to stop it happening?
This problem exists for a whole range of input types. I tested and confirmed it's an issue for type="text", type="number", type="password", type="tel", type="url", type="email"
The only type not affected is type="search"
Depending on your application, it may or may not be possible to switch to a search input. For me, it made sense as it was a search of sorts.
I've given a more detailed response on this related SO question
If the input is inside of the form, put and attr on the form that is autocomplete="off", then make a hidden input as the first child of that form, with also autocomplete="off" If it doesn't work, then try doing autocomplete="chrome-off"
Replacing input with textare is another working solution.
I have an HTML <input> element which, when focused in Chrome android, shows this annoying password management feature above the keyboard which takes up screen real estate. It's not a password type field so I'm not sure why this is happening. Any idea how to get rid of it?
<form id="guess-form" class="svelte-1o40qmd">
<button id="btn-top" type="button" class="svelte-1o40qmd">▲ Top</button>
<input id="input-guess"
type="text"
spellcheck="true" autofocus=""
placeholder="Something"
autocomplete="off"
title="Something"
class="svelte-1o40qmd"/>
<input id="submit" type="submit" value="Guess" class="svelte-1o40qmd"/>
</form>
Update: This is a Chrome bug so remember to report it to the Chrome team (help -> report an issue).
I came across this problem while creating a very similar thing. This is surely an Android Chrome bug as it makes no sense for a Password bar to be showing there.
The problem is evident on MDN when clicking into the sample input elements. It happens with type="text", type="number", type="password", type="tel", type="url", type="email"
But blessedly, it does not happen if you turn it into a search input, eg.
<input type="search" />
In my case, the input can actually be considered a search input of sorts, so I'm comfortable changing it to one as it makes semantic sense.
For anyone else who just wants to get rid of the unnecessary password bar, you will have to toss up whether throwing out semantics and accessibility is worth it.
And you will need to add some extra styling to try and make it look like a normal text input. In my testing, I only really noticed a difference in styling in iOS where a little search icon is added at the start of the input. To remove this, you can add the following CSS rule to the input
-webkit-appearance: none;
For completeness, you may also want to tackle the non-prefixed and moz-prefixed versions.
appearance: none;
-moz-appearance: none;
*Side note for OP: I also came across this problem while building a little game in Svelte, so my input looks almost identical to yours! You can see the game here with the input now changed to a search input *
I'm a bit tired looking for a solution for overlapping input field by soft keyboard on Android. My problem is very similiar to this one: Soft Keyboard Overlapping with EditText Field although in this case it occurs in HTML5, not native application.
More precisely: when the input field is fully covered by keyboard, a whole page is scrolled and this field become visible - that's OK. But if this input was on the edge of visible area (after keyboard appears), my soft keyboard overlaps it and page won't scroll at all. The page will be scrolled just after typing a first sign.
My customer doesn't like this behaviour... It occurs for sure on Galaxy Tab 10" - Android 4.0.3, Lenovo Tablet - Android 3.1.
I have tried setting input's height, using box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; and few more, but nothing worked.
Have you got any idea? I would prefer CSS solutions, javascript page scrolling is not an answer for me in this case (customer requirements).
Maybe it's just an Android Web Browser bug with no workarounds or some specific problem due to some of input's parents' style (I've already tried removing all position: absolute properties)?
All suggestions are welcome.
I had this annoying issue, related to my css framework - mobile-angular-ui.
So it's known bug on internet, and I spent hours on searching for fix on web,but unfortunately none of proposed solutions solved my particular case.
At last I did some testing, and it turned out that this behaviour is caused by framework I used.
(I did report it to mobile-angular-ui authors, but I didn't get response.)
You probably want to do few tests, as I did, to find out if this issue is related to architecture of your app, really. Comment out all the css code and start from blank, pure html page with forms on it.
If all's fine (form should scroll up to show in visible part of view, above of soft keyboard) when your css is commented out/switched off, your issue lies in css, just like in my case.
For those who use mobile-angular-ui in their apps, and get into this issue, this piece of code did the job for me:
html {
overflow: auto;
}
body {
height:auto;
overflow: auto;
}
.scrollable {
position:inherit;
}
The rest depends on your particular case.
I hope this helps.
The simplest way to solve this android nasty (and now in ios7 too) is to use the inputs focus and blur events. If you are not using the footer tag just replace it with the class of your footer element.
In jQuery:
$("input").focus(function(){
$('footer').hide();
});
$("input").blur(function(){
$('footer').show();
});
iPhone's Mobile Safari seems to recognize most new HTML5 input types, in particular the ones detailed here, such that tapping in an input declared like so:
<input type="number" id="myInput" value=""/>
presents the iPhone's numeric keypad.
However, in the Android browser, the usual text keypad is shown when tapping the same input.
Is there a workaround for the Android browser or an alternative attribute that can be set or even a library I can include to have the android browser respect this setting?
if you specify on the input element the type as "number" it will automatically open with the numeric keypad
example
<input type="number" pattern="[0-9]*" name="amount_zip" value="loading.."></input>
the pattern attribute is for iPhone,
you can also get more info on inputs here
I just tried <input type="number"> with a Xoom (Honecomb, I think) and it does cause the numeric keypad to open, which is great, but the field only appears to allow positive integers. Hitting the '-' and '.' keys on the keypad have no effect. Adding relevant min / max attributes or setting a proper pattern don't seem to have any effect. In other words, if you want the keyboard to appear and your numeric field only needs to be zero or a positive integer, this will work. Otherwise (floats, negative numbers), you'll have to use text.
(I realize I'm not answering the question here, I would like to have left this as a comment for the previous answer, but can't figure out how)