企业WiFi强制门户：如何用HTML调用特定布局的虚拟键盘？

问题场景 #

搭建企业WiFi强制门户时，使用type="number"的输入框唤起数字虚拟键盘，但键盘确认键显示为Tab，虽用JS把Tab功能改成了Enter，但希望视觉上直接显示Enter/Go；尝试过type="tel"，但键盘会显示字母，不符合需求。

当前使用的输入框代码：

<input type="number"
 maxlength="7"
 id="voucherCode"
 name="voucherCode"
 placeholder="VOUCHER CODE"
 inputmode="numeric"
 style="
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
    appearance: textfield;
">

可行解决方案 #

1. 改用type="text" + inputmode="numeric"组合

这是最稳妥的方案，既能唤起纯数字键盘，又能让确认键显示为Enter/Go，同时通过额外限制确保只能输入数字：

<input type="text"
       maxlength="7"
       id="voucherCode"
       name="voucherCode"
       placeholder="VOUCHER CODE"
       inputmode="numeric"
       pattern="[0-9]*" <!-- HTML5表单验证，限制仅输入数字 -->
       autocorrect="off" <!-- 关闭iOS自动修正功能 -->
       autocapitalize="none" <!-- 关闭自动大写 -->
       style="
         -webkit-appearance: textfield;
         -moz-appearance: textfield;
          appearance: textfield;
       ">

2. 补充JS过滤非数字输入

为彻底防止用户输入非数字字符，可添加输入监听：

const voucherInput = document.getElementById('voucherCode');
voucherInput.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9]/g, '');
});

原理说明 #

type="number"的输入框在移动端浏览器中，会根据输入框的表单角色（比如是否属于序列输入项）显示不同的确认键，容易出现Tab而非Enter的情况。而type="text"配合inputmode="numeric"，既保留了数字键盘的唤起能力，又让浏览器将其视为普通文本输入，从而显示标准的Enter/Go确认键。

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