type="number"提交报错是因为value小数位数超过step隐含精度，如step="0.01"只允许两位小数，而123.456为三位；step无法实现“最多N位小数”，需用type="text"+pattern+JS校验。
直接用 step 属性就能控制小数位数精度，但必须配对使用——value 的小数位数不能超过 step 所隐含的精度，否则浏览器会报验证失败。
为什么 type="number" 输入小数后点提交就报错？
这是最常见的现象：比如写了 <input type="number" value="123.456" step="0.01">，一提交就提示“请输入有效值”。原因在于 step="0.01" 意味着只接受两位小数（即 0.00、0.01、0.02…），而 123.456 是三位小数，超出了步长能表示的合法值集合。
-
step="1"→ 只允许整数 -
step="0.1"→ 允许一位小数（如 1.0、1.1、1.2） -
step="0.01"→ 允许两位小数（如 1.00、1.23、99.99） -
step="any"→ 不限制小数位数（但不等于“不校验”，仍受min/max约束）
如何精确限定“最多 N 位小数”？
step 只能约束“可接受的值”，不能表达“最多 N 位小数”的宽松语义。例如财务场景常需“最多两位小数”，但允许用户输 123、123.4、123.45 —— 这时 step="0.01" 会拒绝前两者（因为 123 不等于 123.00，123.4 不等于 123.40），实际不可用。
- 更稳妥的做法是改用
type="text"+pattern+ JavaScript 校验 - 正则示例：
pattern="^[0-9]{1,10}(\.[0-9]{1,2})?$"表示最多10位整数、最多2位小数 - 注意：
pattern只对type="text"有效，type="number"忽略它 - 若坚持用
type="number"，只能接受严格步长匹配，无法实现“最多”语义
移动端数字键盘和精度控制有关系吗？
没有。移动端触发数字键盘只取决于 type="number"，和 step 值完全无关。哪怕设 step="any"，iOS 和 Android 依然会弹出带小数点的数字键盘；设 step="1" 也**不会**屏蔽小数点按钮——用户仍可手动输入小数，只是提交时会被拦住。
立即学习“前端免费学习笔记（深入）”；
- 想真正禁用小数点？只能用
type="tel"或type="text"配合inputmode="numeric"+ JS 过滤 -
inputmode="decimal"可显式请求带小数点的键盘，但它不参与任何验证逻辑 - 所有前端精度控制都可被绕过，
step和pattern都必须在服务端重复校验
真正难处理的是「显示精度」和「存储精度」的错位：用户看到的是 123.45，但 JavaScript 里 parseFloat("123.45") 可能变成 123.45000000000002。这类问题不会被 step 或 pattern 捕获，得靠后端做字符串解析或 decimal 类型存储。
