input type=”number” 默认只接受整数，需显式设置 step（如 step=”0.01″ 或 step=”any”）支持小数，min 设为足够小值支持负数；移动端应配合 inputmode=”decimal”；valueAsNumber 返回 NaN 是因违反 min/max/step 约束，验证应优先用 validity 属性。
input type=”number” 为什么输不了小数或负数
浏览器默认对 input type="number" 做了隐式限制：不设 step 时，它只接受整数。哪怕你手动输入 -1.5 或 3.14，提交时可能被清空、截断，或触发 validitystate.badinput === true。
常见错误现象：valueAsNumber 返回 NaN；表单校验通过但实际值丢失；移动端数字键盘不显示小数点。
-
step必须显式设置，比如step="0.01"才允许两位小数；step="any"允许任意精度小数（但注意兼容性） - 要支持负数，确保
min设得足够低（例如min="-100"），否则即使输入了负号也会被自动移除 -
step="1"和不写step行为不同：前者明确限定步长为整数，后者在部分浏览器中会拒绝小数输入
移动端数字键盘不弹出小数点怎么办
安卓 chrome 和部分 webview 对 step="any" 支持差，即便写了也只弹出整数键盘；ios safari 则相对友好，但依赖 inputmode 配合。
使用场景：金额、评分、带精度的测量值输入。
- 优先加
inputmode="decimal"（html5 属性），这是告诉浏览器“我需要小数键盘”，比step更直接生效 -
step="any"要配合inputmode="decimal"使用，单独用效果不稳定 - 避免用
pattern或正则模拟数字校验——它会覆盖原生键盘行为，导致 iOS 弹不出数字键盘
valueAsNumber 返回 NaN 的真实原因
不是因为用户输错了，而是因为输入框当前值未通过浏览器内置的 number 类型解析规则。哪怕 dom 中 value 是 "2.5"，只要它不符合当前 min/max/step 约束，valueAsNumber 就返回 NaN。
立即学习“前端免费学习笔记（深入）”；
性能影响：频繁读取 valueAsNumber 并做判断，不如先检查 validity.valid，避免无效解析开销。
- 检查
input.validity.badInput或input.validity.stepMismatch，比直接读valueAsNumber更准 - 监听
input事件时，不要依赖valueAsNumber获取实时值——用户还没输完（比如刚敲"-"或"."），它必然为NaN - 需要实时数值逻辑，建议用
parseFloat(input.value)+ 手动范围校验，更可控
用 CSS 或 js 强制限制输入内容靠谱吗
不靠谱。用 oninput 截字符串、用 pattern 控制格式、甚至用 type="text" + 正则模拟，都会破坏原生语义和可访问性，且绕不开粘贴、拖拽、开发者工具修改等绕过方式。
真正该做的，是把限制逻辑放在验证层（提交前/失焦时），而不是拦截层。
- 原生
input type="number"的min/max/step是声明式约束，浏览器会参与校验、提示、甚至禁用提交按钮 - JS 拦截输入（如
Event.preventDefault()）会导致屏幕阅读器误读、快捷键失效、iOS 键盘卡顿 - 如果必须定制输入体验（比如千分位、货币符号），应包裹原生
input，用readonly+ 外部显示层，而非替换类型
事情说清了就结束。最常被忽略的是：别把 input type="number" 当成“只能输数字的文本框”来用——它的约束是语义化的、可交互的、有浏览器深度参与的，强行用 JS 覆盖反而让事情更糟。