android - 离开数字输入字段时，Chrome android 键盘输入不会变回文本

Question

例子:

<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/

(在平板电脑上访问，Chrome 桌面不是问题)

当我有两个或多个输入，其中一个类型为 tel 或输入模式为 numeric 时，单击 Android 上的 Next 按钮即使下一个字段是 type=text、type=email，导航到下一个字段的小键盘也会导致键盘的 numeric 布局，或 inputmode = 文本。我必须单击空格键左侧的 ABC 按钮，然后才能输入字母字符。

我们已经在多台运行 Android 8.0 和 Chrome 70+ 的 Android 平板电脑上对此进行了测试

如何强制键盘布局回到字母模式？

Answer 1

我在 iPhone 上遇到了类似的问题。我已经通过添加 from pattern attributes 在 iPhone 上解决了这个问题到 HTML 元素。

尝试使用类似以下带有模式属性的代码:

<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>

不幸的是，我的 Android 系统有点旧，我无法重现你的问题——我已经在 Chrome 和 Opera 浏览器上试过了。我希望我的代码能解决您的问题。

您还可以尝试为此输入使用 inputmode="text" 和 inputmode="email" 属性。这在 Android Chrome 中受支持，也许它会起作用。

---

我的推荐

如果没有 for="name"(对于标签元素)和 id="name"(对于输入元素)属性，您也可以编写更短的代码:

<label>Name: <input type="text" name="name"></label>

在这种情况下，它与此属性相同。