step属性不能规范金额显示格式，仅参与数值校验和步进逻辑；用户仍可手动输入多位小数，需结合min、inputmode及JS实时格式化（如toFixed(2)）才能实现两位小数控制。
step 属性对 <input type="number"> 的实际约束力很弱
直接说结论：step 本身**不能规范金额的显示格式**（比如强制保留两位小数、自动补零、千分位分隔），它只参与浏览器原生的数值校验和上下箭头步进逻辑。很多开发者误以为设 step="0.01" 就能“控制用户只能输两位小数”，但现实是：用户仍可手动输入 123.456，且该值不会被自动截断或报错——除非你额外监听并干预。
为什么 step="0.01" 在金额场景下常失效
根本原因在于 HTML 规范中 step 的语义是“合法值必须满足 value = min + n × step”，但它不触发自动格式化，也不阻止非法输入的临时存在。常见失效现象包括：
- 用户粘贴
123.4567，输入框接受该值，checkValidity()返回true（因默认min是负无穷，step校验被跳过） - 移动端软键盘可能不显示小数点，或输入后光标跳到末尾导致补零困难
-
step="0.01"在 Safari 中对valueAsNumber的解析存在浮点误差，比如输入1.01可能读作1.0099999999999998 - 如果没设
min和max，部分浏览器会忽略step校验逻辑
真正可控的金额输入方案：组合使用 step + inputmode + JS 格式化
想让金额输入既合规又友好，得放弃单靠 step 的幻想，转为三层控制：
- 用
step="0.01"+min="0"明确启用校验逻辑（否则校验形同虚设） - 加
inputmode="decimal"提示移动端调出带小数点的键盘（iOS/Android 均支持） - 用
input事件监听 +toFixed(2)截断并补零，再赋回value；注意要防重复触发（比如用户已输1.2，你补成1.20后光标会跳到末尾，需手动保存/恢复位置） - 禁用粘贴中的非法字符：
paste事件中event.clipboardData.getData('text').replace(/[^0-9.]/g, '')
示例关键代码：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<input
type="number"
step="0.01"
min="0"
inputmode="decimal"
oninput="formatCurrency(this)"
>
<script>
function formatCurrency(el) {
const val = el.value;
if (!val) return;
const num = parseFloat(val);
if (isNaN(num)) {
el.value = '';
return;
}
// 保留两位小数，自动补零
el.value = num.toFixed(2);
}
</script>
绕不开的兼容性坑：type="number" 在 iOS 上的键盘与粘贴问题
iOS Safari 对 type="number" 的实现最不一致：
- 即使设了
inputmode="decimal"，部分 iOS 版本仍只弹出数字键盘（无小数点），必须靠pattern="[0-9]*\.?[0-9]{0,2}"+inputmode="text"曲线救国 - 粘贴时若含逗号、空格或全角符号，
type="number"会静默清空整个输入框，毫无提示 -
step="0.01"在 iOS 上对上下箭头步进无效，只能靠手动输入
所以生产环境建议：金额输入一律用 type="text"，配合正则限制 + 实时格式化，比依赖 type="number" 更可靠。浏览器原生校验只是锦上添花，不是安全网。
