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

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

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

Answer 1

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

Answer 2

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

<input id="phone" name="phone" type="text" inputmode="numeric" pattern="[0-9]*"/>

Answer 3

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

Answer 4

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