input type="number"在表格中不生效是因为它仅提供基础类型提示和简易校验，无法阻止粘贴字母、负号、多余小数点等非法输入，必须配合step、min、max、value、required等属性，并通过javascript监听input和paste事件进行实时过滤与验证。
为什么直接写 input type="number" 在表格里不生效？
很多人把 <input type="number"> 塞进 <td> 就以为能限制数字输入，结果发现：粘贴字母、输入负号、小数点后多个点、甚至空格都能通过。这不是浏览器bug，而是 <code>type="number" 本身只做基础类型提示和简易校验——它不阻止非法字符输入（尤其在 paste 或 keyboard 直接输入时），也不自动清空或修正值。
真正起作用的是后续的事件监听与验证逻辑，HTML 层面只提供基础能力。
input type="number" 必须配合哪些属性才有点用？
单靠 type="number" 不够，至少得补上这几个关键配置：
-
step="1"：禁用小数（除非你明确需要）。默认是step="any"，允许任意小数，比如输入3.14159也能通过校验 -
min和max：定义合法范围，否则用户可输任意大的数（如999999999999），且不会被自动截断 -
value初始值建议设为数字字符串（如value="0"），避免空值触发非数字状态 - 别忘了加
required，否则空值也能提交
示例：
<input type="number" min="0" max="100" step="1" value="0" required>
如何拦截粘贴和键盘输入里的非数字字符？
用户右键粘贴 "abc123" 或按住 Shift+7（&）这类符号，type="number" 完全不管。必须用 JavaScript 拦截：
- 监听
input事件（不是change，后者太晚） - 用正则
/^-?\d*\.?\d*$/判断当前值是否合法（注意：这个正则支持负号和小数点，但不允许多个小数点） - 不合法就立刻还原上一次有效值（不能直接
el.value = ''，否则光标跳到开头） - 对
paste事件单独处理：取e.clipboardData.getData('text')，过滤后再塞回去
简单防错写法：
el.addEventListener('input', e => {<br> if (!/^-?\d*\.?\d*$/.test(e.target.value)) {<br> e.target.value = e.target.dataset.lastValid || '';<br> } else {<br> e.target.dataset.lastValid = e.target.value;<br> }<br>});
表格场景下特别容易踩的坑
表格里多个 input 共享同一套逻辑，但容易忽略这些细节：
- 动态生成的行（如点击“新增行”）：事件监听必须委托到
<table> 或 <code><tbody>，不能只绑在初始 DOM 上 <li>单元格内有空格或换行：<code><td><input></td>如果前后有空白符，可能影响样式或焦点行为，建议写成紧凑格式<td><input></td> - 移动端软键盘弹出异常：iOS Safari 对
type="number"的键盘支持不一致，有时仍弹出全键盘。可加inputmode="decimal"辅助（但兼容性有限） - 回车提交整表时，需遍历所有
input[type="number"]并调用checkValidity()，否则前端校验形同虚设
最麻烦的其实是小数精度问题——比如用户输入 1.00，但 parseFloat 后变成 1，显示丢失精度。如果业务要求保留原始格式，就得自己存字符串，别依赖 valueAsNumber。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
