HTML数字输入如何结合step属性进行校验-html教程-PHP中文网

type="number" 是 step 生效的前提；min+step+value 必须对齐，否则浏览器静默修正；stepmismatch 仅在 submit 或 checkvalidity() 时触发；移动端数字键盘可能不支持小数；pattern 对 number 类型无效；实时校验需监听 input 事件并手动对齐；动态改 step 后须重置 value；后端校验才是最终保障。

html数字输入如何结合step属性进行校验

type="number" 是 step 生效的前提

step 属性只在 type="number"（以及 range、date 等少数类型）下参与校验；写在 type="text" 上完全无效，连上下箭头都不会出现。浏览器会解析 step 属性，但不执行任何步进逻辑或验证——DevTools 里能看到它，但行为上等于没写。

min + step + value 必须对齐，否则浏览器静默修正

浏览器不会校验你写的 value 是否合法，但会在首次交互（如点击 ↑）前自动规整：若 value 不满足 value === min + n × step（n 为整数），Chrome/Safari 可能直接把它改成最近的合法值，导致 spinner 卡住、拖动跳变、用户输入后失焦就变样。

min="0" step="0.1" value="1.05" → 浏览器可能悄悄变成 1.0 或 1.1，DOM 不报错也不触发事件
正确写法：min="0" step="0.1" value="1.0" 或 value="1.1"
金额类强烈建议换单位：min="100" step="1" value="199" 表示 1.99 元，彻底避开浮点误差

stepMismatch 校验只在 submit 或 checkValidity() 时触发

用户仍可输入 3.14159、粘贴 -2.5、甚至 abc，step 不拦截也不清理——它只在表单提交或显式调用 checkValidity() 时，按 (value - min) % step ≈ 0（浮点安全比较）判断是否合法。失败时 input.validity.stepMismatch 为 true，但不会阻止输入过程。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

step="0.1" 下输 0.3 可能被判定非法：因为二进制中 0.1 无法精确表示，0.3 实际存储为 0.30000000000000004，导致模运算不为 0
移动端 iOS Safari 的数字键盘甚至不保证显示小数点，step="0.1" 可能让用户根本输不了小数
别依赖 pattern：对 type="number" 完全无效，浏览器直接忽略

真正可控的校验必须靠 input 事件 + JS 对齐

想实时阻止非步长值，唯一可靠方式是监听 input 事件，在每次输入后主动规整。注意别用 change（太晚）或 keydown（捕获不到粘贴），且避免直接赋值引发光标跳脱。

推荐逻辑：取 parseFloat(e.target.value) → 判断是否 NaN 或不满足步长 → 用 Math.round(val / step) * step 对齐 → 写回 e.target.value

示例（支持 step="0.01" 的折扣输入）：

input.addEventListener('input', e => {
  const v = parseFloat(e.target.value);
  if (!isNaN(v)) {
    const aligned = Math.round(v / 0.01) * 0.01;
    e.target.value = aligned.toFixed(2);
  }
});