代码之家 › 专栏 › 技术社区 › Chris

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

google-chrome html5 android

5

Chris · 技术社区 · 5 年前

例子:

<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 数字 即使下一个字段是 type=text type=email ,或输入模式= text . 我必须单击空格键左边的ABC按钮,然后才能输入字母字符。

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

3 回复 | 直到 5 年前

1

4

Bharata colxi 5 年前

我在iPhone上也遇到过类似的问题。我在iPhone上通过添加from解决了这个问题 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"

我的推荐信

你可以写你的代码也短得多没有 for="name" id="name" (对于输入元素)属性:

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

在本例中,与此属性相同。

2

1

Martin Zeitler 5 年前

在Android上测试 9.0 GBoard 72.0.3626.76 ,但无法重现该问题。但是,属性 inputmode 67 这是我唯一能想到的选择-除了强行切换 JS 关于事件 focus & blur :

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

尝试用Android仿真器重现这个问题可能有助于缩小问题的范围。。。我也这么认为,因为有些设备带有特定于供应商的键盘,可能会对Chrome发出的事件做出不正确的反应。就在最近,我注意到在行为上有一点不同,在 G板 和 SwiftKey

绑定到“请求桌面站点”也值得一试。

3

0

Tamás Bolvári 5 年前

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

https://jsfiddle.net/g34d0nsk/

4

0

Aaron Cicali 5 年前

我在使用TouchPal键盘时也遇到了同样的问题。切换到另一个键盘(GBoard)解决了这个问题,尽管我很困惑为什么。这似乎是浏览器的责任,告诉键盘处于哪种模式。