能，但仅限表单提交校验——用户可手动输入奇数，提交时触发stepmismatch报错；合法值判定逻辑为(value−min)%step≡0，默认min=0，故合法值为0、2、4…需搭配type="number"且建议显式设min="0"。

step="2" 能不能让 number 输入框只接受偶数

能，但仅限于表单提交校验层面——用户仍可手动输入奇数，提交时才被拦截并报错 Please enter a valid value. The two nearest valid values are 2 and 4.。这背后是浏览器对合法值的判定逻辑：(value - min) % step === 0，默认 min 未设时为 0，所以合法值就是 0、2、4、6…

• 必须用 type="number"，type="text" 上写 step="2" 完全无效
• 显式写 min="0" 更稳妥，避免某些浏览器按默认 min=0 推导，但 Firefox 可能不一致
• 如果业务要求初始值为 2，别写 value="2" 就完事——要同时确保 min="0" 和 step="2"，否则 Chrome 可能静默修正 value 或让上下箭头失灵
• 移动端数字键盘会正常唤起，但 iOS Safari 对 step 的 spinner 行为支持稳定，Android 旧 WebView 可能忽略步进，需 JS 补充校验

为什么输入 3 会报错，但输入框里还能看见 3

step 不是输入过滤器，它不劫持键盘事件、不拦截粘贴、也不自动四舍五入或截断。它只做两件事：控制上下箭头的增减幅度，以及在 checkValidity() 或表单 submit 时判断 validity.stepMismatch。

• 用户输入 3 → input.value 就是 "3"，input.valueAsNumber 是 3，但 input.validity.stepMismatch === true
• 此时调用 input.reportValidity() 才会弹出提示；不调用、也不提交，界面就一直显示 3
• 想实时阻止，得监听 input 事件，用正则或 Math.round(val / 2) * 2 主动修正（注意浮点误差），再赋回 input.value

step="2" 配合 min/max 的常见陷阱

合法值集合由 min、max、step 共同生成，不是简单“从 0 开始每隔 2 取一个”。比如 min="1" step="2"，第一个合法值不是 1（因为 (1 - 1) % 2 === 0 成立，所以 1 是合法的），而是 1、3、5… 但如果 min="1.5"，step="2"，那 1.5 就非法——(1.5 - 1.5) % 2 === 0 成立，但 1.5 本身不是整数，而 type="number" 的 step 在整数场景下通常搭配整数 min 使用。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• min="0" max="10" step="2" → 合法值：0、2、4、6、8、10
• min="2" max="10" step="2" → 合法值：2、4、6、8、10（不是从 0 算起）
• min="1" max="10" step="2" → 合法值：1、3、5、7、9（1 是起点，也合法）
• 想严格限定“正偶数”，推荐 min="2" step="2"，并用 JS 监听 change 时检查 valueAsNumber % 2 === 0 && valueAsNumber > 0

比 step="2" 更可靠的偶数控制方式

纯靠 HTML 属性无法做到输入即拦截，尤其当用户粘贴、拖拽、或用键盘快速输入时。step 提供的是轻量级提示+原生校验，真要强约束，得结合 JS。

• 监听 input 事件，用 parseInt(input.value) || 0 转整数，再取最近偶数：Math.round(val / 2) * 2（注意 Math.round(3 / 2) * 2 === 4，不是 2）
• 更稳妥：用 Math.floor(val / 2) * 2 下取整，或 val % 2 === 0 ? val : val - 1 直接减 1
• 避免浮点陷阱：所有运算前先 parseInt 或 Math.trunc，别用 parseFloat 处理本该是整数的场景
• 最终 value 必须与 min/step 对齐，否则 stepUp()/stepDown() 可能跳变异常

真正容易被忽略的是：哪怕你写了 step="2"，只要没配 min 或 min 是小数，不同浏览器对“第一个合法值”的推导可能不一致；而用户看到输入框里能打 3 却提交不了，又不理解为什么，这种体验断层比功能缺失更伤。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！