step="0.01" 仅约束数值粒度且需配合min/max才触发校验，safari支持弱，前端须用js格式化并后端双重校验。

step 属性对 <input type="number"> 的实际限制效果

用 step 控制房贷利率输入，本质是约束用户能输入的数值粒度，比如 step="0.01" 表示只允许输入带两位小数的数字（如 4.35、5.10），但要注意：它不阻止手动输入非法值，也不自动四舍五入或截断——浏览器只在点击上下箭头或使用表单验证时才真正生效。

为什么直接写 step="0.01" 在某些浏览器里没反应

常见原因有三个：

• step 必须配合 min 和 max 才能在 Chrome/Firefox 中触发原生校验（否则即使输 4.335 也不会标红）
• 如果未指定 step，默认值是 1，此时输入 4.35 会被视为“超出步进范围”，提交时可能被拒绝
• Safari 对 step 的支持较弱，尤其在移动端，上下箭头常被隐藏，仅靠键盘输入时几乎不校验

房贷利率输入的合理配置组合

典型房贷利率范围是 3.00% ~ 6.50%，精度到 0.01%，推荐这样写：

Article To Html

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

下载

<input type="number" min="3.00" max="6.50" step="0.01" value="4.35" placeholder="例如：4.35">

关键点：

• min/max 必须带小数位（写成 3 而非 3.00 会导致校验异常）
• step="0.01" 是最稳妥选择；step="any" 会关闭粒度限制，失去控制意义
• 别依赖 step 做精度保障——后端仍需校验并保留两位小数，前端建议加 JS 格式化（如失焦时 parseFloat(value).toFixed(2)）

比 step 更可靠的补充手段

仅靠 HTML 属性无法覆盖所有场景，建议叠加：

• 监听 input 事件，用正则过滤掉多余小数位：/^\d+(\.\d{0,2})?$/
• 失焦（blur）时强制补零或截断：value = parseFloat(value).toFixed(2)
• 服务端必须重新解析并校验——因为用户可禁用 JS 或绕过前端直接发请求

真正难处理的不是 step 怎么写，而是用户粘贴“4.355”或输入“4,35”这类格式；这些得靠 JS 拦截+标准化，HTML 层只能做基础防线。

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