Develop Reference

Chrome android keyboard input doesn't change back to text when leaving a numeric input field

Example:
<form novalidate>
<div class="field">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</div>
<div class="field">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">
</div>
<div class="field">
<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
</div>
<button type="submit">
Submit
</button>
</form>
https://jsfiddle.net/cuvqkp14/
(visit on a tablet, Chrome desktop is not the issue)
When I have two or more inputs one of whose type is tel or whose inputmode is numeric, clicking the Next button on the Android keypad to navigate to the next field results in the numeric layout of the keyboard even if the next field is type=text, type=email, or inputmode = text. I have to click the ABC button to the left of the spacebar and then I am allowed to input alpha characters.
We have tested this across multiple Android tablets all running Android 8.0 and Chrome 70+
How can I force the keyboard layout back to alpha mode?

I had similar issue on iPhone. And I have solved this problem on iPhone with adding from pattern attributes to HTML element.
Try something like the following code with pattern attributes:
<form novalidate>
<p class="field">
<label>Number: <input type="tel" name="number"></label>
</p><p class="field">
<label>Name: <input type="text" name="name"></label>
</p><p class="field">
<label>Phone Number: <input type="tel" name="phone"></label>
</p><p class="field">
<label>Street: <input type="text" name="street" inputmode="text" pattern=".*"></label>
</p><p class="field">
<label>Email Address: <input type="email" name="email" inputmode="email" pattern="[A-Z0-9a-z\.\-#]"></label>
</p>
<button type="submit">Submit</button>
</form>
Unfortunately my Android system is a little bit old and I can not reproduce your issue – I have tried it with Chrome and Opera browsers. And I hope your issue will be solved with my code.
You can additionally try to use inputmode="text" and inputmode="email" atributes for this inputs. This is supported in Android Chrome and maybe it will work.
My recommendation
You can write your code also much shorter without for="name" (for label elements) and id="name" (for input elements) attribute:
<label>Name: <input type="text" name="name"></label>
In this case it is the same like with this attributes.

tested on Android 9.0 with GBoard and Chrome 72.0.3626.76, but were unable to reproduce the issue. however, attribute inputmode would be supported since Chrome for Android v 67 and this is the only alternative I could think of - except forcibly switching with JS on events focus & blur:
<input id="phone" name="phone" type="text" inputmode="numeric" pattern="[0-9]*"/>
trying to reproduce the issue with the Android emulator might help to narrow it down to the cause... and I think so, because some devices come with a vendor-specific keyboard, which might react improperly to events emitted by Chrome. just recently I've noticed a slight difference in behavior, in between the input of GBoard and SwiftKey, when I was bounty hunting.
tying to "request desktop site" might also be worth an attempt.

document.addEventListener('focus', function(event) {
if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') != 'true') {
event.target.blur();
event.target.setAttribute('data-focused', 'true');
setTimeout(function() {
event.target.focus();
}, 0);
}
}, true);
document.addEventListener('blur', function(event) {
if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') == 'true') {
event.target.removeAttribute('data-focused');
}
}, true);
https://jsfiddle.net/g34d0nsk/

I experienced this same issue while using the TouchPal Keyboard. Switching to a different keyboard (GBoard) resolved it, although it's confusing to me why. This seems like the responsibility of the browser to tell the keyboard which mode to be in.

Chrome/Android is prompting to save username on a search input

Chrome or Android is prompting to save a "username" only (no password) for a text input. I cannot replicate it on desktop.
<input placeholder="  Search Name" id="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text">
Any ideas how to prevent this?

I wrapped the input in a form tag, and it stopped.

Android input pointer not below input field

Well, this is strange, the input pointer goes from below of the input field.
I'm working with phonegap/cordova 3.6
Why is this happen?
EDIT
Here goes the html of this image
<div>
<div></div>
<div><div>ITEMS #:</div><div><input type="number" placeholder="0" min="1"></div></div>
<div></div>
<div><div>AMOUNT/ITEM: US $</div><div><input type="number" placeholder="0" min="1" /></div></div>
<div class="doBid">go</div>
</div>

I think it will be easier to answer this question if you provide some code. What does your XML look like, for example.

Where is the inner implementation of "form submit" in webkit of Android

In a browser, if I want to submit a form containing a username and a password input, I only need to add an "action" attribute and set the "method" attribute to "post":
<form method="post" name="form" action="https://www.xxx">
<input id="username" type="text" value="xxxxxx" name="username">
<input id="password" type="password" autocomplete="off" name="password">
<input type="submit" value="submit" >
</form>
then the browser will handle the post and concatenate the password and username as the request and send to the server.
My question is: in the webkit (what I concern is the Android webkit, but I think others will be ok)，where is the code of handling such process? Can I find the code that get the text from the input element, concatenate them, and then send to the server?
Thanks

where there's no answer, I finally find it.
For webkit, there's mainly four directory we need to consider in android:
for java part:
framework/base/core/java/androud/webkit
for native c part
external/webkit/Source/WebCore
external/webkit/Source/WebKit
external/webkit/Source/JavaScriptCore
for the form submit, the java part webkit will send a key event which will be handled by C WebCore.
we can see the code from
WebCore/html/HTMLFormElement.cpp
WebCore/loader/FormSubmission.cpp
WebCore/loader/FrameLoader.cpp

use enter key to submit form with numeric keypad of android / phonegap

Having trouble with the soft "NUMERIC" keyboard on my android/phonegap application.
My goal: create a simple form on a html5 page (that I will use with phonegap), where the user enters a number using 0-9 characters. To do this, I have used an input field with type = number, and this generates the correct soft keyboard on my android phone.
Unfortunately, I've felt a huge amount of frustration trying to detect when the enter key is pressed on the numeric keyboard. Usually when pressed, instead of submitting the form, the keyboard just goes away. However, if I change the type of the input to "text" then the enter key works as expected and submits the form.
How can I reproduce form submission using the numeric keyboard?
For reference see:
http://jsfiddle.net/Ua9yw/13/
WORKING ENTER SUBMISSION BEHAVIOR:
<form> <input type="text"/> </form>
<form id="form1">
<input type="text"/>
<input type="submit"/>
</form>
NOT WORKING ENTER BUTTON BEHAVIOR:
<form> <input type="number"/> </form>
<form id="form1">
<input type="number"/>
<input type="submit"/>
</form>

You can detect the next keyboard press by using the following bind in JQuery:
$('input').on('keydown', function(e){
if(e.which === 9) {
//your code here
}
});
The next button emulates the tab keypress event on a keyboard, which is key code 9. Unfortunately, keypress and keyup events do not detect the next key event, so you need to bind it on keydown.