最直接方案是使用 <input type="number">，但需注意 value 为字符串、IE/Safari 兼容性差、需显式转换数字；更可控方案是 type="text" + 正则过滤与 input 事件校验；服务端必须重新校验，不可依赖前端限制。
用 <input type="number"> 最直接，但浏览器行为不一致
原生 <input type="number"> 是最省事的方案，它自带数字键盘（移动端）、上下微调按钮（桌面端），还能阻止非数字字符粘贴（部分浏览器）。但要注意：value 始终是字符串，提交时不会自动转为数字；IE 和旧版 Safari 不支持该类型，会退化为普通文本框。
常见错误是以为输入后 input.value 就是数字——其实还是字符串。需要显式用 parseInt() 或 parseFloat() 转换，否则参与计算可能出错（比如 "12" + 3 得到 "123"）。
- 设置
min、max、step可约束范围和步进，例如<input type="number" min="0" max="100" step="0.5"> - 用
required配合validity.valid判断是否为空或非法值，比正则更可靠 - 若需禁止微调按钮，CSS 中加
appearance: none并重置伪元素，但各浏览器写法不同（如::-webkit-inner-spin-button）
用 <input type="text"> + 正则限制更可控
当需要完全自定义交互（比如禁止粘贴、实时过滤、兼容 IE），改用 type="text" 并监听 input 或 keydown 事件做拦截更稳妥。这种方式绕过了浏览器原生数字逻辑，行为可预测。
典型陷阱是只监听 keydown：它无法捕获鼠标右键粘贴、拖拽插入、语音输入等操作；必须配合 input 事件做二次校验。
立即学习“前端免费学习笔记（深入）”；
- 推荐在
input事件中用正则/^-?\d*\.?\d*$/过滤（支持负号和小数点），再用parseFloat()提取有效数字 - 对空字符串、
"-"、"."等中间态允许存在，但提交前应校验是否构成合法数字 - 避免在每次输入都
input.value = newValue，会导致光标跳到末尾；可用setSelectionRange()保持光标位置
step 属性影响 up/down 键和微调按钮的行为
step 不仅控制点击上下箭头的增量，还决定键盘 ↑/↓ 键的默认步长。默认值是 1，设为 any 表示无约束（但此时微调按钮失效）。
一个容易被忽略的细节：step 与 min 共同决定“合法值”。例如 min="0" step="0.1"，输入 0.05 在 Chrome 中会被自动四舍五入为 0.1，而 Firefox 可能保留原值但标记为 invalid。
- 整数场景建议显式写
step="1"，避免某些浏览器按浮点步长处理 - 若允许任意精度小数，设
step="any"，但需自行实现增减逻辑（监听keydown捕获ArrowUp/ArrowDown） - 注意
step对valueAsNumber的影响：该属性返回的数值会受step约束后的结果
服务端必须重新校验，前端限制只是体验优化
无论用哪种前端方式，type="number" 的 min/max 或 JS 正则，都可在开发者工具中轻易绕过。服务端收到的仍是原始字符串，且可能含空格、全角字符、科学计数法等前端未覆盖的情况。
实际项目中，后端解析失败导致 500 错误，往往是因为前端“看起来没问题”就放松了服务端校验。
- Node.js 示例：用
parseFloat(req.body.price)后检查!isNaN()和isFinite() - Python 示例：用
try: float(value) except ValueError:捕获异常，而非依赖str.isdigit() - 数据库字段类型（如 PostgreSQL 的
NUMERIC）也要匹配预期精度，避免隐式截断
Infinity、NaN 字符串、千分位逗号、货币符号……前端拦住 90% 的误操作，剩下的 10% 必须靠服务端兜底。 
