step属性设为整数时，input[type="number"]才真正生效；它仅约束合法值范围和上下箭头/滚轮增量，不阻止手动输入小数，须配合min、max、对齐的value及JS实时校验与服务端兜底。
step属性设为整数时，input[type="number"]才真正生效
很多人以为只要写 step="1" 就能限制输入为整数，结果发现用户仍可手动输入小数、粘贴浮点数，甚至用鼠标滚轮微调出小数——这是因为 step 本身不阻止输入，只约束**合法值范围**和**上下箭头/滚轮的增量行为**。浏览器只在表单校验（如调用 checkValidity() 或提交时）才按 step 规则检查。
必须同时设置 min、max 和 step 才能稳定约束整数输入
仅设 step="1" 不够：若未指定 min，默认是负无穷，某些浏览器会允许小数输入而不报错；若 value 初始为空或非整数，校验可能绕过。正确做法是明确边界：
<input type="number" min="0" max="100" step="1" value="5">
-
min和max建议显式声明，哪怕用极大/极小值（如min="-1000000"），避免依赖浏览器默认 -
value初始值必须与step对齐，比如step="1"时不能设value="3.5"，否则加载即报错或被重置 - 若需支持“无初始值”，用
value=""，但注意空值在校验中被视为有效，需额外 JS 控制
用 JavaScript 强制整数输入比纯 HTML 更可靠
HTML 层面无法拦截键盘输入或粘贴，真实场景中常需补充 JS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
input事件，用Math.round(parseFloat(e.target.value))实时修正 - 对
paste事件做正则过滤：e.clipboardData.getData('text').match(/^-?\d+$/) - 禁用滚轮微调：给
input绑定wheel事件并e.preventDefault() - 注意：不要只监听
change，它不触发实时修正，用户可能已提交非法值
移动端 iOS Safari 的 step="1" 有兼容性陷阱
iOS 15.4 之前，Safari 对 step="1" 的数字键盘不显示小数点，看似友好，但若用户切换到全键盘或粘贴，依然能输小数；iOS 16+ 改为默认显示小数点，更符合标准但失去“强制整数”错觉。关键点：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖数字键盘外观判断是否安全
- 服务端必须二次校验，因为所有前端限制都可绕过
- 若业务强要求整数，考虑改用
type="tel"+ 正则 JS 校验，虽牺牲语义但控制力更强
最易被忽略的是：即使 HTML 属性全配对，用户长按输入框唤出“选择器”时，iOS 仍可能提供小数选项——这时候只有 JS 的 input 实时拦截和后端兜底能真正守住边界。
