input type="number" 默认禁用小数点和负号是浏览器原生实时过滤行为；需加 step="any" 支持小数、min/max 支持负数；千分位格式化不可行，须用 type="text" + inputmode="decimal" + JS 或展示层分离；获取值应优先用 valueAsNumber 并校验 !isNaN() && isFinite()。
input type="number" 为什么输不了小数或负数？
默认情况下 input type="number" 会拒绝非整数输入（比如点、负号），不是 bug，是浏览器原生行为——它在用户按下键时就做了实时过滤，还没到 change 或 input 事件阶段。
常见现象：输入 -1.5，光标一离开就变回空或 0；输入 3. 后续无法补 14；某些安卓键盘甚至不弹出小数点键。
- 加
step="any"允许任意精度小数（包括1.234、-0.001） - 加
min和max显式支持负数（例如min="-100"），否则部分浏览器禁用负号 - 不要只靠
pattern或 JS 拦截，那是在“对抗”原生校验逻辑，反而容易失效
怎么让 number 输入框显示千分位逗号（如 1,234.56）？
input type="number" 不支持格式化显示。浏览器强制以纯数字字符串渲染，valueAsNumber 返回数值，value 返回去掉逗号的原始字符串——你写入 "1,234.56"，它会立刻变成 "1234.56"。
真正能显示逗号的只有 type="text"，但那就失去了原生数字校验、上下箭头、移动端数字键盘等优势。
立即学习“前端免费学习笔记（深入）”；
- 折中方案：用
type="text"+inputmode="decimal"（唤起带小数点的软键盘）+ JS 格式化（输入时保留光标位置，避免跳动） - 若必须用
type="number"，格式化只能放在展示层（比如旁边放一个<span>实时同步并格式化） - 注意：CSS
appearance: textfield无法绕过该限制，只是改样式，不改行为
移动端数字键盘不弹出 / 弹错键盘怎么办？
不同系统对 input type="number" 的键盘映射不一致：iOS 通常弹出带小数点和负号的数字键盘；部分安卓机型（尤其国产定制 ROM）可能只弹纯数字键盘，或直接弹出全键盘。
关键不是换 type，而是组合属性引导系统：
- 加
inputmode="decimal"（比type="number"更明确地告诉浏览器“我要输小数”） - 加
pattern="[0-9]*"或pattern="[-+]?[0-9]*[.,]?[0-9]+"（仅作提示，不强制校验） - 避免同时设
type="number"和inputmode="text"，这会让浏览器困惑 - 测试真机：模拟器常不准，特别是华为、小米等机型对
inputmode支持滞后
如何正确获取和验证 number 输入框的值？
别直接读 input.value 做数值判断——空值、非法输入（如用户粘贴了 "abc"）时，value 是空字符串，但 valueAsNumber 会返回 NaN，这才是可靠信号。
- 用
input.valueAsNumber获取数值，它天然处理空值、无效输入（返回NaN） - 验证是否有效：
!isNaN(input.valueAsNumber) && isFinite(input.valueAsNumber)（排除Infinity） - 设置初始值别用字符串：
input.value = "123"可以，但input.valueAsNumber = 123更稳妥 - 监听推荐用
input事件而非change，后者只在失焦时触发，无法响应实时输入
最易被忽略的是：当用户清空输入框后，valueAsNumber 是 NaN，但 value 是空字符串，这时候如果代码里写了 if (input.value) {...} 就会漏掉这个“清空”状态。
