type="number"无法实时阻止非法输入，仅提供数字键盘和基础解析；真正限制需用input事件+正则过滤并维护光标位置，且服务端必须二次校验。
HTML 的 type="number" 本身不阻止用户输入非数字字符，它只是提供数字键盘（移动端）和上下箭头，真正能拦住非法输入的只有 JavaScript 验证或表单提交时的约束检查。
为什么 type="number" 看起来“没用”
浏览器允许用户在 <input type="number"> 中粘贴字母、输入多个小数点、甚至负号后跟字母（如 -abc），且不会实时报错。这是因为该类型只控制输入法提示和基础解析逻辑，value 属性在非法输入时会返回空字符串，但 DOM 值（input.value）仍可能含脏数据。
- Chrome/Firefox 允许输入
e、E、+、-、.—— 它们是科学计数法合法字符，但常被误用 - 用户复制粘贴 Excel 单元格（含换行或制表符）会导致
value变为空，但input.valueAsNumber返回NaN -
min/max属性仅在调用reportValidity()或表单提交时触发校验，不拦截输入
怎么真正限制只能输数字（整数）
靠 input 事件 + 正则过滤是最直接可控的方式，尤其适合需要实时清理的场景。
- 监听
input事件（不是keydown，后者无法捕获粘贴） - 用正则
/[^0-9]/g替换所有非数字字符 - 注意保留光标位置：先记录
selectionStart，再设值，最后恢复 - 避免重复触发：检查新旧值是否相同，相同则跳过
input.addEventListener('input', e => {
const oldValue = e.target.value;
const newValue = oldValue.replace(/[^0-9]/g, '');
if (newValue !== oldValue) {
const pos = e.target.selectionStart;
e.target.value = newValue;
e.target.setSelectionRange(pos - (oldValue.length - newValue.length), pos - (oldValue.length - newValue.length));
}
});想支持小数？小心这些边界
允许小数点就复杂多了：12.34.56、.123、123. 都得处理，而且要考虑 locale（比如德语用逗号作小数点）。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：用
/[^0-9.]/g过滤 → 但会留多个点，需二次清洗 - 推荐正则：
^(\d*\.?\d*)$配合input.value.match()提取合法前缀 -
step="any"必须显式设置，否则默认step="1"会让1.5被判为无效 - 移动端 iOS 键盘在
type="number"下不显示小数点，加inputmode="decimal"可修复
别依赖 pattern 或 required 做实时控制
pattern 只在表单提交或调用 checkValidity() 时生效，对输入过程零干预；required 只管是否为空，不管内容是否真为数字。
-
pattern="[0-9]*"在提交时才校验，用户已输完一堆字母 -
oninvalid和setCustomValidity()是补充提示手段，不能替代输入过滤 - 服务端永远要重新解析并校验——前端限制纯属用户体验优化
最易被忽略的是粘贴行为和 IME 输入（比如中文输入法状态下按数字键，实际触发的是组合事件），单纯监听 keypress 或过滤 keyCode 会漏掉一大半非法输入。真实项目里，input 事件 + 正则 + 光标维护才是稳解。
