pattern不能真正限制输入，仅在提交时校验；需用oninput+正则替换实现实时过滤，如oninput="this.value = this.value.replace(/1/g, '')"。0-9 ↩
直接说结论：pattern 不能真正“限制”输入，它只在提交时校验，输错字母也能照常输入、粘贴、不拦截。想纯数字输入，必须用 oninput + 正则替换，pattern 只能当“提交守门员”，不是“键盘过滤器”。
为什么 pattern="[0-9]+" 挡不住字母？
pattern 的作用机制是：用户点提交或调用 checkValidity() 时，才拿当前值去匹配正则。输入过程中浏览器完全放行——粘贴 abc123、按 Shift+4 输出 $、甚至手动改 DOM 值，pattern 都不会干预。
常见误判现象：
- 写了
pattern="[0-9]+"，但输入12a3不报错 → 因为还没提交，校验根本没触发 - 提交时报错，但错误提示是“请与所要求的格式匹配” → 没加
title属性，浏览器用默认文案 - 在
type="number"上写pattern→ 完全无效，该类型会忽略pattern
真正能拦住非数字的实操方案
靠 oninput 实时清洗值，这是目前最稳、兼容性最好（IE11+、所有现代浏览器）的做法：
立即学习“前端免费学习笔记（深入）”；
- 用
oninput="this.value = this.value.replace(/[^0-9]/g, '')"，匹配并删掉所有非数字字符 - 允许清空：正则
/[^0-9]/g对空字符串无影响，不会强制补 0 - 配合
inputmode="numeric"，iOS/Android 大部分浏览器会主动弹出数字键盘 - 如果需支持小数，改用
/[^0-9.]/g，但要额外处理多个小数点（如12..3→ 可用parseFloat(this.value) || ''简单兜底）
示例代码：
<input type="text" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
pattern 还有没有用？怎么用才不翻车？
有，但定位要清晰：pattern 是表单提交前的最后一道轻量格式检查，适合做“长度+字符集”类静态约束，比如验证码、固定位数手机号。
- 必须搭配
required，否则空值直接跳过校验 - 别写
^和$—— 浏览器自动加，显式写反而可能因转义出错（如^[0-9]{6}$在某些旧 Android WebView 中解析失败） - 移动端提示弱：Safari 对
title文案支持不稳定，建议同时用 JS 监听invalid事件补充提示 - 中文场景慎用
[\u4e00-\u9fa5]：老版 Android WebView 不识别 Unicode 范围，优先服务端校验
正确写法示例（6位纯数字验证码）：
<input type="text" pattern="[0-9]{6}" title="请输入6位数字验证码" required>
最易被忽略的一点：pattern 校验失败后，input 元素的 validity.valid 会一直为 false，直到用户再次输入有效内容或手动调用 setCustomValidity("") 清空状态——否则哪怕你改对了，再点提交仍可能卡在旧错误里。
