readonly 属性用于协议条款展示，确保文本可读、可选、可复制但不可编辑，且表单提交时值仍有效；与 disabled 不同，它不阻止聚焦和复制，语义正确、无障碍友好。
textarea readonly 属性在协议条款展示中的典型用法
协议条款这类内容必须「可读、可选、可复制、但不可改」，readonly 正是为此设计的——它不阻止用户聚焦或复制文本，同时确保字段值随表单提交。这和 disabled 有本质区别：disabled 下的值根本不会发到后端。
为什么不用 disabled 或 CSS 禁用输入
用 disabled 会导致协议文本无法被选中、复制，用户没法摘录关键条款；用 pointer-events: none 或 user-select: none 只是视觉/交互遮罩，绕过 JS 就能编辑，且不改变表单语义。而 readonly 是 HTML 原生语义属性，浏览器原生支持、无障碍友好、表单逻辑可靠。
实际写法与易错点
直接写 readonly 即可，不需要赋值：
<textarea rows="8" cols="60" name="terms_agreed" readonly>用户须知：本服务协议自您点击“同意”起生效……</textarea>
- ✅ 正确：
<textarea readonly>—— HTML5 允许布尔属性省略值 - ❌ 错误：
<textarea readonly="true">或<textarea readonly="false">—— 浏览器会把它当字符串值处理，实际仍为只读（但语义错误） - ⚠️ 注意：
readonly对<select>、<button>无效，协议场景里别误用在下拉框上 - ? 补充：如果协议内容来自后端，务必确保服务器渲染时已带上
readonly，不要依赖 JS 后续添加——否则首屏可能短暂可编辑
配合 JavaScript 动态控制是否可编辑
常见需求是「勾选同意复选框后才允许编辑备注」，此时需 JS 控制 readonly 属性的增删：
立即学习“前端免费学习笔记（深入）”；
const termsBox = document.getElementById('terms-text');
const agreeCheck = document.getElementById('agree');
agreeCheck.addEventListener('change', () => {
if (agreeCheck.checked) {
termsBox.removeAttribute('readonly');
} else {
termsBox.setAttribute('readonly', '');
}
});
注意：用 removeAttribute('readonly') 而不是 readOnly = false，因为 DOM 属性名是 readOnly（驼峰），但 HTML 属性名是 readonly（全小写），混用容易失效。另外，别忘了同步更新 aria-readonly 以保无障碍兼容。
协议类只读文本最常被忽略的是「提交时值是否还在」——只要用了 readonly，哪怕样式灰了、光标没了，它的值一定进表单数据；但一旦不小心写成 disabled，后端就收不到这条关键确认字段了。
