HTML5中readonly属性的正确写法是直接在支持文本输入的元素（如input[type="text"]、textarea）上添加布尔属性readonly；它使字段可聚焦、可复制、值可提交，不同于disabled。
HTML5 中 readonly 属性的正确写法
HTML5 里让表单字段只读，最直接的方式就是给 、 或 加上 readonly 布尔属性。它和 disabled 不同：字段仍可聚焦、内容可被选中复制，且提交时值会正常发送。
注意：readonly 只对支持文本输入的元素有效，比如 、、；对 、、 无效（这些该用 disabled）。
readonly 和 disabled 的关键区别
两者视觉上可能相似，但行为差异极大，选错会导致表单逻辑出错：
-
readonly元素的值会随表单一起提交；disabled元素的值**不会提交** -
readonly元素可以获取焦点、支持tabindex、内容可全选复制；disabled元素完全失焦、无法交互、也无法被复制 -
readonly在 CSS 中仍匹配:focus、:hover；disabled则不响应大多数伪类 - JavaScript 中，
element.readOnly是可读写的布尔属性；element.disabled同理，但修改它们会立即生效
JavaScript 动态控制只读状态
用 JS 切换只读状态很常见，比如根据复选框勾选来启用/禁用输入框。注意别混淆属性名：readOnly（驼峰，JS 属性） ≠ readonly（小写，HTML 属性）。
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById("myInput");
// 设为只读
input.readOnly = true;
// 取消只读
input.readOnly = false;
// 检查当前状态（返回布尔值）
console.log(input.readOnly); // true / false
避免用 setAttribute("readonly", "") 或 removeAttribute("readonly")，因为它们操作的是 HTML 属性，而 DOM 属性 readOnly 才是真实生效的控制点。尤其在动态渲染或框架（如 React）中，直接操作 DOM 属性更可靠。
只读字段的样式与可访问性注意事项
浏览器默认对 readonly 字段几乎不加视觉提示，用户可能误以为能编辑。建议用 CSS 明确标识：
input[readonly], textarea[readonly] {
background-color: #f5f5f5;
color: #666;
cursor: not-allowed;
}
同时注意可访问性：readonly 字段仍应有明确的 ，且不要移除 tabindex（除非有意阻止键盘导航）。如果字段内容是纯展示、无需提交，那它其实不该是表单控件——考虑改用 + 隐藏的 更合适。
容易忽略的一点：某些旧版 iOS Safari 对 readonly 的 支持不稳定，点击仍可能唤起日期选择器；这种场景建议用 disabled + 额外隐藏域，或改用只读文本模拟。
