html文档无法整体设为只读，需按元素类型分别处理：input/textarea用readonly或disabled，contenteditable元素必须设contenteditable="false"，javascript操作时注意属性名大小写与动态插入时机。
HTML 文档整体无法设为只读
HTML 没有 readonly 属性能作用于整个文档（比如 或 ）。所谓“文档只读”，实际是控制用户能否编辑其中的可交互元素——核心只有两类：input、textarea，以及带 contenteditable 的元素。
让表单控件真正不可编辑：用 readonly 还是 disabled？
二者都阻止输入，但行为差异关键：
-
readonly：字段仍可聚焦、内容可选中、值会随表单提交 -
disabled：完全失焦、不可选中、值不参与表单提交 - 对
select、button等元素，readonly无效，只能用disabled - 若需视觉上“灰掉”但保留值提交，用
readonly；若彻底禁用且不传值，用disabled
示例：<input type="text" value="固定内容" readonly>
contenteditable="true" 元素怎么锁住？
富文本区域（如 <div contenteditable="true">）不受 <code>readonly 或 disabled 影响。必须显式关闭编辑能力：
立即学习“前端免费学习笔记（深入）”；
- 设
contenteditable="false"—— 最直接有效 - 移除
contenteditable属性本身也等效于false - 仅加
pointer-events: none或user-select: none不够：键盘仍可触发编辑（尤其粘贴、回车） - 若需保留样式/布局但禁用编辑，务必用
contenteditable="false"，别依赖 CSS 遮罩
JavaScript 动态控制只读状态时的坑
用 JS 切换 readonly 或 contenteditable 时，容易忽略这些：
- 设置
element.readOnly = true（注意大小写：JS 中是readOnly，HTML 属性是readonly） - 修改
contenteditable要用element.setAttribute('contenteditable', 'false')，直接赋值element.contentEditable = 'false'也可，但注意属性名是contentEditable（驼峰） - 对动态插入的元素，得在插入后立即设置，不能依赖 CSS 类或父级状态推断
- 某些旧版 Safari 对
contenteditable="false"的焦点劫持不彻底，可额外加tabindex="-1"防止键盘聚焦
只读不是靠一层属性糊住就行，得按元素类型分别处理，漏掉 contenteditable 就等于留了个可编辑后门
