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.

to enable dot in html keypad input

I am designing a website. Dealing with an HTML page where a user enters decimal numbers. Let's say I will ask for their height and he has to enter it as 5.6 feet. The problem I am having is the input format on the Android keypad. My code for input format is:
<input type="number" lang="en-150" id="height1" name="total" value="" placeholder="In feet">
Now when the android keyboard appears it does not contains the dot(.) instead it just contains numbers 1,2,3,...,9,0. So user can't enter 5.6 instead 56.
I have also used:
type="number" lang="en-150"
and:
type="number" step="0.01"
and:
type="decimal"
Despite all, the keyboard is still simple. I have also checked stack flow and codes on other forums but nothing helps me out.

You can do this with:
<form action="">
<input id="height1" type="text" name="total" pattern="[0-9]+(\.([0-9]+)?)?" value="" placeholder="In feet">
<input type="submit">
</form>
However, the user can insert any character after the validation
To solve this, you will need use javascript and check before any keyDown click

Android Chrome disable auto-suggest on search input form

I have the following search form:
<div id="search_banner">
<form id="intranet_search" class="search" action="<?=base_url()?>search/">
<div id="intranet_search_search_bar">
<input type="search" id="intranet_search_q" name="q" spellcheck="false" autocomplete="false" autocorrect="false" placeholder="search intranet" value="<?=$intranet_search_query?>" />
<input type="search" id="intranet_search_ac_hint" spellcheck="false" autocomplete="false" autocorrect="false" disabled />
<input type="submit" id="intranet_search_button" value="Search">
</div>
<div id="intranet_search_ac"></div>
</form>
</div>
Which emulates Google's autosuggest inserted into the element #intranet_search_ac via javascript. This works as expected.
However on Chrome for Android (40.0.02214.109) I get the following suggestion appearing on top of my suggestions (highlighted below):
As you can see from the form I am using the usual spellcheck="false" autocomplete="false" autocorrect="false" attributes. Is there any way to disable this behaviour?

try using
autocomplete="off" autocorrect="off" spellcheck="false"

Currently it's not possible. I reported a ticket to support autosuggest="off", you can vote for it. https://bugs.chromium.org/p/chromium/issues/detail?id=901839

rangy deserialize not working on webview android

I am trying to make "Highlighter" for epub reader in one my Android project using webview.
I am using Rangy for getting Selected text.
The serialize functions gives me this value after selecting text from the below sample HTML:
2/5/3/5/1/2:0,13/5/3/5/1/2:24
I am storing this in DB. When user returns to this page, i am retrieving the same selection and trying to deserialize but the deserialize function throws the following error:
Error in Rangy Serializer module: deserializePosition failed: node <DIV>[7] has no child with index 13, 0
I am getting why this is happenig??
Even i am trying to do the same thing using XPath but still the same issue.
<html>
<head>
<script></script>
</head>
<body>
<div id="mainpage" class="highlighter-context">
<div> Some text here also....... </div>
<div> Some text here also.........</div>
<div>
<h1 class="heading"></h1>
<div class="left_side">
<ol></ol>
<h1></h1>
<div class="text_bio">
In human beings, height, colour of eyes, complexion, chin, etc. are
some recognisable features. A feature that can be recognised is known as
character or trait. Human beings reproduce through sexual reproduction. In this
process, two individuals one male and another female are involved. Male produces
male gamete or sperm and female produces female gamete or ovum. These gametes fuse
to form zygote which develops into a new young one which resembles to their parent.
During the process of sexual reproduction
</div>
</div>
<div class="righ_side">
Some text here also.........
</div>
<div class="clr">
Some text here also.......
</div>
</div>
</div>
</body>
</html>
Any guesses??

you are probably using the following:
highlighter.highlightSelection();
rangy.serializeSelection();
if you are running highlightSelection before serializing it will not work.
this is because highlighting is actually wrapping text in tags which means that DOM is manipulated.
deserializing on original DOM will obviously won't work.
try change the order of commands so you will serialize first and only then use highlight.
Correct Order:
rangy.serializeSelection();
highlighter.highlightSelection();

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