HTML textarea的readonly属性场景？展示不可编辑的协议条款-html教程-PHP中文网

readonly 属性用于协议条款展示，确保文本可读、可选、可复制但不可编辑，且表单提交时值仍有效；与 disabled 不同，它不阻止聚焦和复制，语义正确、无障碍友好。

html textarea的readonly属性场景？展示不可编辑的协议条款

textarea readonly 属性在协议条款展示中的典型用法

协议条款这类内容必须「可读、可选、可复制、但不可改」，readonly 正是为此设计的——它不阻止用户聚焦或复制文本，同时确保字段值随表单提交。这和 disabled 有本质区别：disabled 下的值根本不会发到后端。

为什么不用 disabled 或 CSS 禁用输入

用 disabled 会导致协议文本无法被选中、复制，用户没法摘录关键条款；用 pointer-events: none 或 user-select: none 只是视觉/交互遮罩，绕过 JS 就能编辑，且不改变表单语义。而 readonly 是 HTML 原生语义属性，浏览器原生支持、无障碍友好、表单逻辑可靠。

实际写法与易错点

直接写 readonly 即可，不需要赋值：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<textarea rows="8" cols="60" name="terms_agreed" readonly>用户须知：本服务协议自您点击“同意”起生效……</textarea>

✅ 正确：<textarea readonly></textarea> —— HTML5 允许布尔属性省略值
❌ 错误：<textarea readonly></textarea> 或 <textarea readonly></textarea> —— 浏览器会把它当字符串值处理，实际仍为只读（但语义错误）
⚠️ 注意：readonly 对 <select></select>、<button></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，后端就收不到这条关键确认字段了。