type="number" 输入框的 value 永远是字符串，需用 number()、parsefloat() 等显式转换；其校验仅在提交时触发，且不拦截粘贴等操作，须配合 input 事件监听、setcustomvalidity() 和服务端校验；step 默认为 1，不设则小数无效；移动端需加 inputmode 才能正确唤起数字键盘。
type="number" 看似简单，但实际用起来常出现输入非数字、小数点失控、移动端体验差、提交值为字符串等问题——它不是“数字版 type="text"”，而是带语义和约束的专用控件，必须配合正确属性才能按预期工作。
为什么输入框里还能输字母或中文？
因为 type="number" 仅在**表单提交时校验**，且只阻止浏览器原生的非法输入（如连续两个小数点），不拦截键盘事件。用户仍可粘贴、拖拽、用开发者工具改 DOM 来绕过限制。
- 真正有效的防御是服务端校验 + 前端
input事件监听 +setCustomValidity() - 若只要禁止非数字字符，需手动监听
input并event.target.value = value.replace(/[^0-9.]/g, '')（注意：这会破坏光标位置，慎用） - 更稳妥的做法是用
pattern配合title提示，例如：<input type="number" pattern="[0-9]*" title="请输入数字">（注意：pattern对number类型支持有限，主要靠required和step驱动原生验证）
step、min、max 不写会怎样？
不写 step 时，浏览器默认值为 1，这意味着：输入 3.14 会被视为无效（除非显式设 step="any" 或 step="0.01"）；不写 min/max 则无范围限制，但用户可能意外输入极大值导致计算溢出或后端解析失败。
-
step="any"允许任意精度小数，适合金额、科学计算等场景 -
step="0.01"强制两位小数，避免浮点误差（如价格输入） -
min="0" max="100"在 Chrome 中会禁用上下箭头超出范围，但 Safari 不一定生效——别依赖 UI 禁用，仍需 JS 校验
移动端数字键盘不弹出？
iOS Safari 和部分安卓 WebView 对 type="number" 的键盘触发不敏感，尤其当 inputmode 缺失时。单纯靠 type 不够。
- 必须加上
inputmode="decimal"（小数）或inputmode="numeric"（整数），这是 W3C 推荐的键盘提示方式 - 避免同时设置
pattern和inputmode冲突（如pattern="[0-9]+"+inputmode="decimal"可能导致 iOS 键盘退化为默认键盘） - 测试真实设备：Chrome Android 通常表现良好，iOS 16+ 支持
inputmode，旧版 iOS 只能靠type="tel"+ 样式隐藏符号（不推荐，语义错误）
获取的 value 是数字还是字符串？
永远是 字符串。即使用户只输 42，input.value 也是 "42"，不是 42。这是 HTML 表单最易忽略的事实。
- 直接用于计算会隐式转为
NaN（比如"42" * "abc"） - 安全转换方式：
Number(input.value)（空字符串转0）、parseFloat(input.value)（空字符串转NaN）、parseInt(input.value, 10)（忽略小数） - 注意边界：用户清空输入框后
value是空字符串""，Number("") === 0，这可能掩盖未填写错误
真正麻烦的不是怎么写这个标签，而是它在不同浏览器、不同输入法、不同设备上的行为差异——尤其是 step 的默认值和 inputmode 的兼容性，这两点一旦漏掉，测试阶段才暴露问题就晚了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
