离开数字输入字段时,Chrome安卓键盘输入不会更改回文本

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或者其INPUTMODE是numeric,点击Next了Android键盘上按钮以导航到下一个字段的结果numeric,即使下一个字段是键盘的布局type=text,type=email或INPUTMODE = text.我必须单击空格键左侧的ABC按钮,然后我可以输入字母字符.

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

如何将键盘布局强制恢复为alpha模式？

Answer 1

我在 iPhone 上也遇到了类似的问题。我已经通过将模式属性添加到 HTML 元素来解决 iPhone 上的这个问题。

\n\n

尝试使用以下具有模式属性的代码：

\n\n

\r\n

\r\n

<form novalidate>\r\n  <p class="field">\r\n    <label>Number: <input type="tel" name="number"></label>\r\n  </p><p class="field">\r\n    <label>Name: <input type="text" name="name"></label>\r\n  </p><p class="field">\r\n    <label>Phone Number: <input type="tel" name="phone"></label>\r\n  </p><p class="field">\r\n    <label>Street: <input type="text" name="street" inputmode="text" pattern=".*"></label>\r\n  </p><p class="field">\r\n    <label>Email Address: <input type="email" name="email" inputmode="email" pattern="[A-Z0-9a-z\\.\\-@]"></label>\r\n  </p>\r\n  <button type="submit">Submit</button>\r\n</form>

\r\n

\r\n

\r\n

\n\n

不幸的是我的Android系统有点旧，我无法重现你的问题\xe2\x80\x93我已经用Chrome和Opera浏览器尝试过。我希望我的代码能够解决您的问题。

\n\n

您还可以尝试使用此输入的inputmode="text"和属性。inputmode="email"Android Chrome 支持此功能，也许它会起作用。

\n\n\n\n

我的推荐

\n\n

for="name"您可以在没有（对于标签元素）和 id="name"（对于输入元素）属性的情况下编写更短的代码：

\n\n

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

\n\n

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

\n