step属性不自动提供提示信息，仅用于值校验、步长控制和滑块刻度，需JS手动实现placeholder动态更新、自定义stepMismatch提示及实时验证反馈。
step 属性本身不提供输入提示信息，也不能直接触发 title、placeholder 或 pattern 提示。所谓“联动”，其实是靠开发者手动配合实现的视觉与行为协同，不是浏览器自动绑定的功能。
为什么 step 不会自动显示提示
浏览器对 step 的处理仅限于：校验值是否符合 min + n × step 规则、控制箭头增减步长、影响滑块刻度点。它不生成任何 UI 提示文本，也不会改变 placeholder 内容或弹出 title 浮层。
- 设了
step="0.01"，但用户仍可能看到 placeholder="请输入金额" —— 这和 step 无关，是单独写的 - 用户输入
1.234且step="0.01"时，提交才报错，但不会提前在输入框旁显示“请输两位小数” -
title属性即使写了，也只在鼠标悬停时显示，且内容完全由你手写，浏览器不会把 step 值自动塞进去
用 JavaScript 动态更新 placeholder 提示
想让提示文字反映当前 step 含义（比如“最小变动 0.01 元”），必须用 JS 读取并拼接：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="number" id="price" step="0.01" min="0" max="9999.99">
<script>
const input = document.getElementById('price');
const step = parseFloat(input.step) || 1;
input.placeholder = `请输入 ${step} 的倍数（如 ${step}, ${step * 2}...）`;
</script>- 注意：不能直接用
input.step原样拼接，因为可能是"any"字符串，需先parseFloat()判断是否为有效数字 - 若
step="any"，建议 placeholder 改为“支持任意精度小数”而非留空或报错 - 移动端 Safari 有时忽略 placeholder 动态更新，可加
input.dispatchEvent(new Event('input'))强制重绘
结合 validity API 在表单提交前显示 stepMismatch 提示
原生校验失败时，input.validity.stepMismatch 为 true，但浏览器默认错误消息很简陋（如“值必须为 0.01 的倍数”）。你可以拦截并自定义：
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('invalid', e => {
e.preventDefault();
if (input.validity.stepMismatch) {
input.setCustomValidity(`请输入 ${parseFloat(input.step) || 1} 的整数倍`);
}
});- 必须配
e.preventDefault()，否则浏览器会覆盖你的自定义消息 -
setCustomValidity只在checkValidity()或提交时生效，不会实时显示；如需实时反馈，得监听input事件 + 手动计算(value - min) % step - 浮点误差要处理：别用
%直接判断，改用Math.abs(((value - min) / step) % 1) < 1e-10
真正容易被忽略的点
很多人以为给 step 配个 title 就算“联动”了，但实际中：title 在触摸设备上基本不可见，placeholder 在 focus 后就消失，而原生 stepMismatch 提示只在提交瞬间闪一下。真要可靠提示，得自己加 <span class="hint"></span> 并用 JS 实时更新内容——这比想象中更重，也更常被跳过。
