input[type="number"]不能直接当数字锁用，因浏览器允许输入非法字符且value可能为字符串、valueasnumber返回nan；需用input事件+正则实时过滤，并注意光标位置、小数支持、移动端适配及服务端校验。
type="number" 本身不阻止用户输入非数字字符，它只是语义提示和触发数字键盘——真正限制必须靠 JavaScript 实时干预。
为什么 input[type="number"] 不能直接当“数字锁”用
浏览器允许用户粘贴 "12abc"、输入 "-+e"、甚至 "..5"，value 属性可能仍是字符串，而 valueAsNumber 在非法时返回 NaN。Safari 忽略 pattern，iOS 键盘默认不显示小数点，min/max 仅影响校验不拦截输入——这些都不是边缘情况，而是日常发生。
用 input 事件 + 正则做实时过滤（整数场景）
监听 input（不是 keydown），覆盖所有输入来源（粘贴、拖拽、语音）：
input.addEventListener('input', e => {
e.target.value = e.target.value.replace(/[^0-9]/g, '');
});
- 正则
/[^0-9]/g精准剔除非数字字符，不留空格、点、负号 - 避免在
onkeyup或onpaste上写内联 JS，不易维护且无法统一处理光标 - 若需保留光标位置，得先读
selectionStart，再设值，最后用setSelectionRange恢复
支持小数时的关键细节
允许小数点后最多两位、支持负号、不允许多余符号——不能只靠一个 replace 解决：
- 用
/^-?\d*\.?\d*$/匹配合法前缀，再取.match()[0]提取最左有效片段 -
step="any"必须显式设置，否则 Chrome 默认step="1"会让1.5提交失败 - 移动端 iOS 需加
inputmode="decimal"才能唤出带小数点的键盘 - 别用
toFixed(2)截断，它会四舍五入；应改用Math.floor(num * 100) / 100
最易被忽略的是：过滤后直接赋值会重置光标到末尾，用户在中间修改时体验断裂；服务端校验不可省，因为 JS 可被禁用或绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
