type="number"无法实现纯数字限制，因它允许粘贴字母、输入e/-/.等符号且pattern无效；可靠方案是type="text"+inputmode="numeric"+pattern="[0-9]*"+js实时过滤。
移动端表单中，type="number" 本身并不严格阻止用户输入非数字字符（比如在 iOS Safari 中仍可粘贴字母、输入“e”或“-”），仅靠它无法实现“纯数字”限制。真正可靠的方式是 用 type="text" + inputmode="numeric" + pattern="[0-9]*" + JavaScript 辅助校验，兼顾体验与兼容性。
为什么 type="number" 不够用？
虽然 type="number" 会唤起数字键盘（部分机型），但它允许以下行为：
- iOS Safari 允许粘贴含字母的字符串（如 "123abc"）
- 支持输入符号如
e、+、-、.（尤其在科学计数或小数场景） -
pattern属性对type="number"完全无效（HTML 规范明确指出 pattern 不适用于 number/date 等类型） - 部分安卓浏览器对
step或min/max解析不一致，影响验证逻辑
推荐方案：text + inputmode + pattern + JS
用语义更可控的组合替代 type="number"：
-
type="text"：让pattern生效，且不引入额外解析逻辑 -
inputmode="numeric"：在支持的移动端（iOS 12.2+、Android Chrome 71+）主动唤起数字键盘 -
pattern="[0-9]*"：声明只接受 0–9 字符（注意：*表示“零个或多个”，适合允许空值；若需至少一位数字，改用+） - 搭配
oninput或addEventListener('input')实时过滤非法字符（防粘贴/拖拽/长按粘贴等绕过）
示例代码：
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="11" oninput="this.value = this.value.replace(/[^0-9]/g, '')" placeholder="请输入手机号">
补充体验优化点
- 加
autocomplete="off"防止浏览器自动填充邮箱或地址干扰 - 对关键字段（如手机号、验证码）建议设
maxlength，避免超长输入 - 提交前仍需服务端二次校验——前端限制仅为体验层，不可信任
- 若需支持中文输入法下的数字（如九宫格拼音键盘打“一”“二”），则必须依赖 JS 过滤，
pattern无法覆盖
不建议的折中做法
- 仅用
type="number"+step="1"+min="0"：无法禁用负号、小数点，pattern 无效 - 用
type="tel"：虽唤起数字键盘，但语义不符（会被读屏工具读作“电话”，且 pattern 行为不稳定） - 仅靠 CSS
appearance: none改样式：不解决输入内容合法性问题
