textarea设置readonly属性的正确写法是直接写readonly，无需值或引号；它是布尔属性，存在即生效，且保留聚焦、复制、滚动和表单提交能力，与disabled有本质区别。
textarea 设置 readonly 属性的正确写法
直接写 readonly 就行，不需要值、也不需要加引号——浏览器认这个布尔属性本身。HTML 规范允许省略值，所以 <textarea readonly></textarea> 和 <textarea readonly></textarea> 效果完全一样，但前者更简洁、不易拼错。
常见错误是写成 <textarea readonly></textarea> 或 <textarea readonly></textarea>，这些在部分浏览器里可能“碰巧”生效，但不符合标准，XHTML 环境下会报错，也不该依赖。
-
readonly是布尔属性，存在即生效，不存在即不生效 - 不要用
disabled替代——它会让textarea失焦、不可复制、值不提交 - 如果用 JS 动态设置，必须用
element.readOnly = true（注意 JS 中是readOnly，驼峰大写）
为什么 readonly 后还能选中、复制、聚焦？
这是设计使然，不是 bug。readonly 的本意是「内容不可编辑，但可交互」：用户能用 Tab 进入、鼠标选中文本、Ctrl+C 复制，表单提交时该字段的值照常发送。这和 disabled 有本质区别——后者彻底切断交互链路。
如果你发现设置了 readonly 却仍能输入，大概率是以下情况之一：
立即学习“前端免费学习笔记（深入）”；
- 实际没生效：检查是否拼错成
read-only或readonlye - 被 JS 覆盖：比如某段代码执行了
el.removeAttribute('readonly')或el.readOnly = false - 样式干扰：CSS 里写了
pointer-events: none，但这只禁鼠标，键盘（如粘贴）仍可能触发编辑
jQuery 中用 attr() 还是 prop()？
两者都能设，但语义和行为不同：attr() 操作的是 HTML 属性字符串，prop() 操作的是 DOM 属性状态。对 readonly 这种布尔属性，推荐用 prop()。
示例：
$("textarea").prop("readonly", true); // ✅ 推荐，反映真实状态<br>$("textarea").attr("readonly", "readonly"); // ⚠️ 可用，但修改后若再用 removeAttr()，可能残留空属性导致误判
反向操作也一样：用 .prop("readonly", false) 比 .removeAttr("readonly") 更可靠，尤其在动态反复切换时。
contenteditable 元素不能靠 readonly 锁住
如果页面里有个 <div contenteditable="true">，给它加 readonly 属性完全无效。这是常见盲区——readonly 对非表单元素无意义。
要锁住这类富文本区域，唯一有效方式是：
- 设
contenteditable="false"（HTML 写法） - 或用 JS：
el.contentEditable = "false"（注意大小写是contentEditable） - 额外加
tabindex="-1"防旧版 Safari 键盘意外聚焦
仅靠 CSS 的 user-select: none 或 pointer-events: none 不够——用户仍可通过键盘粘贴、回车换行等方式触发编辑。
