html中限制数字输入不能仅依赖type="number"，需结合min/max/step属性、inputmode="decimal"、正则实时清理及parsefloat校验等多层防护，兼顾兼容性与用户体验。
HTML输入标签限制数字输入，不能只靠 type="number" 就以为万事大吉。它本身不实时拦截字母、符号或非法粘贴，只是提供语义提示和基础解析能力。真正可控的限制，得靠属性组合 + JavaScript 配合，还要兼顾移动端表现和后端兜底。
用 type="number" 搭配 min/max/step 做基础约束
这是最轻量的原生方式，适合对精度和兼容性要求不高的场景：
-
设范围：加
min="0"和max="100"，浏览器会禁用超出范围的上下箭头，并在提交时校验 -
控步长：默认
step="1"只认整数；要输小数，必须显式写step="0.01"或step="any" -
注意空值：用户清空输入后，
value是空字符串，min/max不触发——需额外加required防空
强制只显示纯数字（如手机号、ID）
如果业务要求输入框里“一眼就只能看到数字”，就得用 JavaScript 实时清理：
- 监听
input事件（不是keydown，它拦不住粘贴） - 用正则
/[^0-9]/g替换所有非数字字符 - 推荐写法：
- 如需保留光标位置或支持退格逻辑，可封装为带选区维护的函数
移动端数字键盘与小数点支持
光靠 type="number" 在 iOS 或安卓微信里常弹不出小数点，得加料：
- 加
inputmode="decimal"（比numeric更准），明确告诉浏览器“我要输小数” -
step="any"必须配合inputmode="decimal"才稳定生效 - 旧版 Safari 对
step支持弱，关键场景建议降级为type="text"+ 全 JS 校验
验证时别踩 valueAsNumber 的坑
读取数值千万别直接信 input.valueAsNumber：
- 它对格式极其敏感：空值、末尾小数点（
"5."）、科学计数法（"1e2"）、全角数字都会返回NaN - 更稳的做法是：
parseFloat(input.value)，它自动忽略尾部非法字符，容错更强 - 比较前先判断是否为有效数字：
!isNaN(parseFloat(val)) && parseFloat(val) >= min
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
