安卓Chrome页面加载时自动唤起数字键盘的技术方案求助

在安卓系统的Chrome浏览器（Zebra PS20 Personal Shopper设备）中，页面加载时第二个input字段已获取焦点，但数字键盘未自动弹出，需手动点击输入框才能唤起。需实现页面加载后直接唤起数字键盘，省去手动操作步骤。

尝试的初始代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
<script>document.addEventListener("DOMContentLoaded", () => document.querySelector("input[inputmode='numeric']").focus())
</script>
</head>
<body>
  <form action="/Ostupult" id="js-form" method="post">
    <input type="number" />
    <input type="tel" value="" min="0" max="9999" autofocus inputmode="numeric" step=".1" />
  </form>
</body>
</html>

可行解决方案 #

1. 延迟触发焦点 #

部分专用移动设备会拦截DOMContentLoaded阶段的焦点操作，添加小延迟确保页面完全初始化：

document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    document.querySelector("input[data-numeric]").focus();
  }, 200); // 200ms延迟可根据设备调整
});

2. 优化input属性配置 #

避免属性冲突，统一使用适配数字输入的属性组合：

<input type="number" value="" min="0" max="9999" inputmode="decimal" step=".1" data-numeric />

• type="number"：明确标记为数字输入类型
• inputmode="decimal"：唤起支持小数输入的数字键盘
• 移除冲突的type="tel"属性，避免键盘类型混淆

3. 主动调用安卓Chrome键盘API #

针对安卓Chrome环境，使用专属API主动唤起虚拟键盘：

document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    const inputEl = document.querySelector("input[data-numeric]");
    inputEl.focus();
    // 安卓Chrome专属唤起逻辑
    if (typeof inputEl.showSoftInput === 'function') {
      inputEl.showSoftInput();
    }
  }, 200);
});

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      setTimeout(() => {
        const inputEl = document.querySelector("input[data-numeric]");
        inputEl.focus();
        if (typeof inputEl.showSoftInput === 'function') {
          inputEl.showSoftInput();
        }
      }, 200);
    });
  </script>
</head>
<body>
  <form action="/Ostupult" id="js-form" method="post">
    <input type="number" />
    <input type="number" value="" min="0" max="9999" inputmode="decimal" step=".1" data-numeric />
  </form>
</body>
</html>

内容的提问来源于stack exchange，提问作者Andrus