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 按钮导航到下一个即使下一个字段是numeric，type=text或inputmode = type=email，该字段也会导致键盘的text布局。我必须单击空格键左侧的ABC按钮，然后才可以输入字母字符。

我们已经在所有运行Android 8.0和Chrome 70+的Android平板电脑上进行了测试

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

Answer 1

我在iPhone上有类似的问题。我已经通过在iPhone元素中添加pattern attributes到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>

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

Answer 2

在9.0和Chrome GBoard的Android 72.0.3626.76上进行了测试，但无法重现该问题。但是，由于Chrome for Android v inputmode以来，将支持属性67，这是我能想到的唯一选择-除了在事件JS和{上用focus强制切换之外{1}}：

blur

尝试使用Android模拟器重现该问题可能有助于将问题缩小到原因...而且我想是这样，因为某些设备带有特定于供应商的键盘，可能会对Chrome发出的事件做出不正确的反应。就在最近，我发现赏金狩猎时，在<input id="phone" name="phone" type="text" inputmode="numeric" pattern="[0-9]*"/>和GBoard的输入之间，行为存在细微差别。

绑定“请求桌面站点”也可能值得尝试。

Answer 3

xyz

https://jsfiddle.net/g34d0nsk/

Answer 4

我在使用TouchPal键盘时遇到了同样的问题。切换到其他键盘（GBoard）可以解决此问题，尽管这使我感到困惑。这似乎是浏览器负责告诉键盘处于哪种模式的责任。

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

4 个答案: