step="1"真正生效需同时满足：type必须为number或range；min/max/value须与step对齐（如min="0"、value="42"）；移动端需加inputmode="numeric"；且须用js校验粘贴等绕过行为。
step 属性设为整数很简单，但关键不是“怎么写”，而是“怎么写才真正生效”——很多场景下写了 step="1" 却发现输入框仍接受小数、箭头乱跳、移动端键盘不显示数字键，问题几乎都出在配套属性没对齐。
type 必须是 number 或 range
给 type="text" 或 type="tel" 加 step="1" 完全无效，浏览器直接忽略。只有以下两种类型会解析 step：
<input type="number" step="1"><input type="range" step="1">
别指望用 CSS 或 JS “激活”它——type 不对，step 就是摆设。
min/max/value 必须与 step=1 对齐
写 step="1" 但 min="0.5" 或 value="2.3"，浏览器会静默修正：Chrome 可能把 value="2.3" 改成 "2"，Safari 可能卡住第一次 ↑ 点击。合法值必须满足：value === min + n × 1（n 为整数）。
- 正确示例：
<input type="number" min="0" max="100" step="1" value="42"> - 错误示例：
<input type="number" min="0.5" step="1" value="3">→ 第一个合法值是0.5，不是0；3虽然合法，但min和step类型不一致，部分旧版 Firefox 会拒绝渲染增减按钮
移动端和兼容性要额外防一手
Android WebView 和旧版 Safari 对 step="1" 支持稳定，但有两点易漏：
- 移动端 iOS Safari 的数字键盘，若没配
inputmode="numeric"，可能默认弹出全键盘，用户输小数点后就卡住（即使step="1"已禁用小数） - 某些安卓浏览器在
type="number"下忽略step，只靠 JS 校验兜底：监听input事件，用Math.round(parseFloat(e.target.value))强制取整，再写回e.target.value
别信“设了 step=1 就万无一失”
用户仍可粘贴小数（如 "5.7"）、用鼠标滚轮微调、或通过开发者工具改 DOM —— step="1" 只管浏览器原生行为（箭头、滚轮、拖拽），不管手动输入。表单提交前会触发 validity.stepMismatch，但不会实时拦截。真要锁死整数，得加一层 JS 校验：
input.addEventListener('input', () => {
const num = parseFloat(input.value);
if (!isNaN(num) && !Number.isInteger(num)) {
input.value = Math.round(num);
}
});
注意：直接赋值 input.value 会再次触发 input 事件，建议加标记位或用 setImmediate 防死循环。最麻烦的从来不是写 step="1"，而是忘了 value 初始值是否对齐、忘了移动端键盘行为、忘了用户总有办法绕过原生限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
