是最直接的数字输入方式，支持软键盘数字布局并过滤非法字符，但需用valueAsNumber读取、配合JS校验，且不阻止粘贴或DOM篡改。
用 <input type="number"> 获取键盘输入的数字
浏览器原生支持数字输入，<input type="number"> 是最直接的方式。它会触发软键盘数字布局（移动端），并自动过滤非数字字符（如字母、中文），但注意：它**不阻止粘贴非法内容**，也不保证 value 一定是有效数字——空值、"-"、"e" 都可能残留。
- 必须加
id或name才能被 JS 安全读取，比如<input id="numInput" type="number"> -
valueAsNumber属性比value更可靠：当输入为空或非法时，valueAsNumber返回NaN，而value是空字符串 - 不要依赖
type="number"做校验——后端/JS 仍需验证，因为用户可绕过（如禁用 JS、手动改 DOM）
用 JavaScript 监听 input 事件实时读取
想在用户每按一次键就响应（比如做范围限制或格式化），不能只靠 change 事件——它只在失焦时触发。要用 input 事件，但它对 type="number" 的兼容性没问题，且能捕获删除、粘贴等所有修改。
- 绑定方式：
document.getElementById("numInput").addEventListener("input", handleInput) - 在回调里优先用
event.target.valueAsNumber判断是否为有效数字，避免字符串转数字时出现NaN却没察觉 - 如果需要限制小数位数，别在
input中直接改value（会导致光标跳动），改用setSelectionRange配合防抖更稳妥
为什么不用 <input type="text"> + parseInt？
可以，但代价高：要自己处理负号、小数点、科学计数法（"1e2"）、空格、千分位符号等边界情况。原生 type="number" 已帮你屏蔽了大部分无效输入，valueAsNumber 也已做类型转换。
-
parseInt("12.34")返回12，丢失精度；parseFloat虽好些，但仍接受"12.34abc"并返回12.34 -
type="text"在 iOS 上不会弹出数字键盘，体验降级 - 若真要用文本框（比如要支持带单位的输入如
"12px"），那就必须写正则校验，不能只靠parseInt
常见错误：提交后拿不到值或得到 NaN
多数是因为没检查元素是否存在，或没等 DOM 加载完就执行 JS。另一个高频坑是表单用 submit 事件但没 preventDefault，导致页面刷新、JS 中断。
立即学习“前端免费学习笔记（深入）”；
- 确保 JS 在
