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

Question

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?

Answer 1

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.

Answer 2

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.