type="number" 仅校验是否为有效数字字符串，不检查 min/max 范围，不阻止非法粘贴或符号输入，需 JS 拦截；整数限制、科学计数法禁用、空值处理等均无法单靠 HTML 实现。
为什么 type="number" 表单控件总不按预期校验？
浏览器对 type="number" 的校验逻辑和开发者直觉常有偏差：它只校验输入是否为「有效数字字符串」，不校验是否在 min/max 范围内，也不阻止用户粘贴非数字内容（如 "12.3abc"）——这些都得靠 JS 补充拦截。
-
min和max仅影响表单提交时的原生验证（且部分浏览器忽略），不影响键盘输入限制 - 用户仍可输入
e、+、-、.等符号（例如"-1.5e3"是合法数字字符串） - 空值、
" "、"--1"会被视为无效，但不会自动清空或报错，需监听input或change手动处理
如何让 type="number" 真正只接受整数？
靠 HTML 属性本身做不到。浏览器允许小数点和指数符号，step="1" 只是提示语义，不阻止输入 "3.14"。必须结合 JS 控制。
- 监听
input事件，用正则/^-?\d*$/实时过滤非数字字符（注意保留负号和空值） - 避免用
change—— 用户可能输完就失焦，但值仍是非法字符串（如"12."） - 设置
valueAsNumber后再读取，比直接读value更可靠（input.valueAsNumber对非法值返回NaN）
input.addEventListener('input', () => {
const num = input.valueAsNumber;
if (isNaN(num) && input.value !== '') {
input.value = input.value.replace(/[^0-9-]/g, '').replace(/^-{2,}/, '-');
}
});
type="number" 在移动端触发什么键盘？
iOS Safari 和 Android Chrome 大多会弹出数字键盘，但行为不统一：iOS 不显示小数点按钮（除非设 step="any"），Android 则通常带小数点和负号。
- 想强制出现小数点？加
step="any"，但代价是允许任意浮点格式（包括"1.2e3"） - 想禁用科学计数法？光靠 HTML 不行，得用 JS 拦截
e、E键（event.key === 'e' || event.key === 'E'） - 不要依赖
pattern—— 它对type="number"无效，浏览器会忽略
提交时后端为何收到空字符串而不是 null？
HTML 表单序列化规则决定：未填写的 type="number" 字段提交时被当作空字符串 ""，不是 null 或缺失字段。后端解析时若直接转数字，parseInt("") 得 NaN，Number("") 也得 0，容易埋坑。
立即学习“前端免费学习笔记（深入）”；
- 前端可在提交前清理：
if (input.value === '') delete formData[input.name]; - 后端别轻信
req.body.xxx类型，始终校验是否为有效数字（比如用typeof x === 'number' && !isNaN(x) && isFinite(x)） - 服务端框架（如 Express）默认把空字符串转成字符串，不是数字，这点比前端更“诚实”
真正麻烦的是边界情况：用户删光输入、粘贴空白、用语音输入塞进不可见字符……type="number" 的“防呆”能力远比看起来弱。别把它当安全网，只当辅助提示。
