如何为带空格的数字格式输入框设置pattern='\d*'触发移动端数字键盘

浏览器原生的pattern规则校验触发时机早于自定义的表单提交逻辑，校验时会直接读取输入框当前带空格的value，自然会和\d*的全数字规则不匹配，抛出格式错误。

方案1：用inputmode属性替代pattern（最优解） #

inputmode="numeric"是W3C标准指定的、专门用于通知浏览器唤起数字键盘的属性，不需要依赖pattern的hack实现，兼容性覆盖所有主流移动端浏览器（iOS 12+、安卓所有主流版本），完全规避原生pattern校验问题。
代码示例：

<!-- 薪资输入框 -->
<input type="text" inputmode="numeric" id="salary" placeholder="请输入薪资">
<!-- 手机号输入框 -->
<input type="text" inputmode="numeric" id="phone" placeholder="请输入手机号">

后续正常实现输入掩码逻辑即可，提交时主动移除输入值内的空格再提交，不会有任何原生校验报错。

方案2：保留pattern，关闭表单原生校验 #

如果因为兼容性需求必须保留pattern="\d*"的写法，可以给form标签添加novalidate属性，关闭浏览器自带的表单校验能力，改为自己实现校验逻辑：

<form novalidate id="form">
  <input type="text" pattern="\d*" id="salary">
  <button type="submit">提交</button>
</form>

提交时自行判断处理后的纯数字值是否符合规则，不符合的话自定义提示即可。

方案3：双输入框隔离视觉层和数据层 #

用一个无name属性的可视输入框实现掩码格式化、唤起数字键盘的逻辑，再配套一个隐藏的、带name属性的输入框存储纯数字值，用户输入时实时同步纯数字到隐藏框，提交时实际生效的是隐藏框的纯数字值，完全不会触发格式错误：

<!-- 可视输入框，仅做交互和展示 -->
<input type="text" inputmode="numeric" id="salaryView" placeholder="请输入薪资">
<!-- 隐藏输入框，实际提交用 -->
<input type="hidden" name="salary" id="salaryReal">

逻辑示例：

const salaryView = document.getElementById('salaryView')
const salaryReal = document.getElementById('salaryReal')
salaryView.addEventListener('input', () => {
  // 提取纯数字
  const pureNum = salaryView.value.replace(/\D/g, '')
  // 给可视框加千分位空格掩码
  salaryView.value = pureNum.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
  // 同步纯数字到真实提交框
  salaryReal.value = pureNum
})

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