type="number"的value始终为字符串，需用parsefloat等安全转换；支持小数负数需step="any"和min；唤数字键盘应优先用inputmode="decimal"配合type="text"；粘贴校验须手动监听paste事件；后端必须二次校验。
type="number" 的 value 永远是字符串，别直接当数字用
读取 input.value 得到的一定是字符串，哪怕你输的是 42 或 -3.14。直接拿它做计算（比如 input.value * 2）会触发隐式类型转换，但一旦值非法（如 "12.3abc"、" "、"12."），结果就不可靠——可能变成 NaN、0 或静默截断。
更稳妥的做法是：
- 优先用
parseFloat(input.value)：它能自动忽略尾部非数字字符（"12.3px"→12.3），容错性比Number()和input.valueAsNumber高 - 若必须用
valueAsNumber，先trim()再判断：!isNaN(input.valueAsNumber) && isFinite(input.valueAsNumber) - 整数校验别只信
step="1"，得额外检查：Number(input.value) % 1 === 0
小数点、负号输不进去？不是 bug，是浏览器在拦你
默认情况下，type="number" 会在按键阶段就过滤掉 .、-、e 等符号——还没到 input 事件，光标就卡住了。这不是 JS 没生效，是原生行为。
要支持小数和负数，必须显式加属性：
- 加
step="any"：允许任意精度小数（1.234、-0.001） - 加
min（如min="-100"）：否则部分浏览器（尤其 Safari）会禁用负号 - 避免只写
min="-10"却漏了step：不设step时默认为1，-10.5会被视为无效
移动端数字键盘唤不起？inputmode 才是关键
仅靠 type="number" 在 iOS 和部分安卓 WebView 中大概率唤不出带小数点的数字键盘——用户只能看到全键盘，体验断层。
真正起效的是 inputmode 属性：
-
inputmode="decimal"：强制唤起含小数点的数字键盘（iOS/Android 通用） -
inputmode="numeric"：纯数字键盘（无小数点，适合整数） - 必须配合
type="text"使用才稳定；若坚持用type="number"，inputmode只是锦上添花，不能补救原生限制
所以高兼容方案是：<input type="text" inputmode="decimal"> + JS 校验 + 展示层格式化（比如旁边同步显示 1,234.56）。
粘贴非数字内容？原生校验根本不管这事
type="number" 对粘贴（Ctrl+V）完全放行：用户能轻松粘入 "abc"、"12.3.4"、"$123"，甚至 "1e5"——这些都不会被实时拦截，表单提交时才可能报错。
要真做到“只接受数字”，得手动守门：
- 监听
paste事件，event.preventDefault()后读取剪贴板，用正则清洗再赋值 - 监听
input事件，对当前值做实时过滤（注意：简单replace(/[^0-9.-]/g, '')会破坏光标位置，慎用） - 别依赖
change：用户可能输完直接点提交，change根本没机会触发 - 后端必须二次校验：前端所有 JS 都可被绕过，
min/max/step也一样
最易被忽略的一点：科学计数法（如 "1e2"）是合法数字字符串，valueAsNumber 会正确转成 100，但业务上往往不允许——这种语义限制只能靠 JS 或后端规则实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
