type="number"配合step属性是控制小数位数最可靠的原生方案，step="0.01"限制两位小数，需确保value与step匹配，移动端键盘自动适配，pattern仅提交校验，safari旧版需js兜底，服务端必须二次校验。
用 type="number" 配合 step 控制小数位数最可靠
浏览器原生支持小数输入限制，type="number" 是唯一能同时兼顾语义、可访问性与基础校验的方案。关键在 step 属性：设为 0.01 表示只允许两位小数，0.1 对应一位，any 则不限精度（但会失去校验能力）。
常见错误是只写 step="0.1" 却忽略 min/max 或初始值含多余小数位，导致输入框默认显示不合法值或触发校验失败。
-
step="0.01"时，value="1.234"会被视为无效，清空或重置后才可重新输入 - 初始值必须匹配
step，比如step="0.01"就不能写value="1.5"（应写value="1.50"或由 JS 格式化） - 移动端数字键盘会因
step值自动切换小数键盘（step="1"弹整数键盘，step="0.1"弹带小数点的键盘）
用 input 事件 + 正则实时过滤容易失控
纯前端正则截断（如 /^\d+(\.\d{0,2})?$/）看似灵活，实际问题很多：粘贴、拖拽、光标位置错乱、撤销失效、屏幕阅读器反馈异常。尤其当用户输入 1.234 时，直接删掉末位 4 会让光标跳到末尾，破坏连续输入体验。
如果必须用 JS 控制，优先用 input 事件 + setSelectionRange 保光标，且仅用于兜底（比如后端要求严格两位小数，而 type="number" 在 Safari 旧版有兼容问题）。
- 正则建议用
^(\d+\.?\d{0,2}|\.\d{1,2})$，覆盖.12、12、12.3等合法形式 - 必须在
input后同步调用element.setSelectionRange(oldStart, oldEnd)，否则光标会跳到末尾 - 禁用
change或blur时再处理——那时用户可能已离开，无法及时反馈错误
pattern 属性只在表单提交时校验，不能阻止输入
pattern 是 HTML5 表单验证机制的一部分，仅影响 checkValidity() 和提交拦截，对键盘输入完全无约束。写成 pattern="^\d+(\.\d{1,2})?$" 后，用户依然可以输入 1.234，直到点提交才弹红框提示。
它适合做“最终把关”，比如配合 title="请输入最多两位小数" 给出友好提示，但绝不能当作输入限制手段。
-
pattern的正则需省略首尾/，且默认带^$锚定，不用额外加 - 若同时用了
type="number"，pattern在部分浏览器（如 Chrome）会被忽略——number类型有自己的内置校验逻辑 - 提交失败时，
:invalid伪类可用，但无法通过 CSS 控制小数位高亮
Safari 对 step 的兼容细节常被忽略
Safari 15.4 之前不支持 step="0.01" 的精确校验，输入 1.234 不会标红，提交时也通过。这不是 bug，是规范实现差异：Safari 把 step 仅用于键盘增减按钮（↑↓），不用于输入值校验。
若目标用户包含大量 Safari 用户，且业务强依赖小数精度（如金额），必须用 JS 双重校验：提交前跑一遍 parseFloat(value) % 0.01 === 0，并提示具体错误。
- 不要依赖
validity.stepMismatch在 Safari 中判断——它始终为false - 服务端永远要重新校验小数位，前端限制只是体验优化
- 测试时务必用真实 Safari 设备或 BrowserStack，模拟器可能行为不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
