readonly是布尔属性，存在即生效，仅对文本类input（如text、email、date等）和textarea有效，不影响聚焦、复制及表单提交；checkbox、radio等不支持；区别于disabled，readonly值会提交且可交互。
直接在 <input> 标签里写 readonly 就能生效，它是个布尔属性，存在即启用，不需要赋值。
比如：
<input type="text" value="系统生成订单号" readonly>
这个输入框用户不能打字、不能删除，但可以点击聚焦、用 Tab 切换进去、选中文字、复制内容，提交表单时它的值也会一起发给后端。
哪些 input 类型支持 readonly
只对文本类输入控件有效：
-
type="text"、"password"、"email"、"tel"、"url"、"search" -
type="date"、"number"、"datetime-local"等带文本输入行为的类型 -
<textarea>同样支持
不支持的情况（写了也无效）：
立即学习“前端免费学习笔记（深入）”；
-
type="checkbox"、type="radio"、type="hidden" -
<select>、<button>、普通<div>或contenteditable元素
别和 disabled 搞混
-
readonly：可聚焦、可复制、值会提交 → 适合“展示+需保留数据”的场景，比如预填邮箱、订单号、时间戳 -
disabled：不可聚焦、不可复制、值不提交 → 适合“临时禁用且不参与业务流程”的字段
动态控制只读状态（JavaScript）
推荐用原生属性操作，兼容性更稳：
// 设为只读
inputEl.setAttribute('readonly', 'readonly');
// 或
inputEl.readOnly = true; // 注意 JS 中是 readOnly（驼峰）
// 取消只读
inputEl.removeAttribute('readonly');
// 不建议用 inputEl.readOnly = false，部分旧版 Safari 有兼容问题样式和可访问性建议
浏览器默认不改变 readonly 输入框外观，容易让用户误以为能编辑。建议加一点 CSS 提示：
input[readonly], textarea[readonly] {
background-color: #f5f5f5;
cursor: default;
border-color: #ddd;
}同时加上 aria-readonly="true"，方便屏幕阅读器识别：
<input type="text" value="不可修改" readonly aria-readonly="true">
