step属性在readonly状态下完全不生效，既不约束用户编辑（因无法编辑），也不参与表单校验或提交验证；实现“只读但精度可控”必须依赖javascript提前对齐value值。
step 属性在只读（readonly）状态下**完全不生效**——它既不影响只读行为，也不改变浏览器对输入值的校验逻辑。只读状态只阻止用户编辑，而 step 是用于约束“可编辑时的合法取值”，两者作用域互不重叠。
readonly 属性会忽略 step 的所有约束
当 input 元素设置了 readonly，浏览器就跳过全部原生步进校验流程：
- 用户无法点击上下箭头（按钮被禁用），所以
step决定的增减幅度失去执行场景 - 用户仍可复制粘贴、通过开发者工具修改
value，但此时step不会触发validity.stepMismatch - 表单提交时，
readonly输入框的值照常提交，且**不校验是否符合step规则**（哪怕value="2.05"、step="0.1"也不会报错）
为什么不能靠 readonly + step 实现“只读但精度可控”
常见误解是：设 readonly 同时配 step="0.01" 就能“锁定两位小数”。实际无效，原因有三：
-
readonly不阻止 JS 修改：input.value = "3.14159"可直接写入，step对此无感知 - 初始
value若与min/step不对齐（如min="0",step="0.01",value="1.2"），浏览器可能静默修正为1.20或保留原值，行为不一致 - 移动端 Safari 或旧版 Android 浏览器在
readonly下可能直接忽略step属性，连属性解析都不做
真要让只读输入“看起来也守精度”，得靠 JS 和 value 对齐
仅靠 HTML 属性做不到。必须在设置 readonly 前，主动把 value 格式化到符合 step 的粒度：
- 用
parseFloat(val).toFixed(p)固定小数位（p由step推导：如step="0.01"→p=2） - 或更稳妥地按步进对齐：
Math.round(parseFloat(val) / parseFloat(step)) * parseFloat(step) - 之后再设
el.readOnly = true，并加aria-readonly="true"保障无障碍
最易被忽略的一点：很多人以为给 readonly 输入框配了 step 就等于“锁死了精度”，其实它连提交校验都不参与——真正起效的只有你手动对齐过的那个 value 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
