textarea 元素加 readonly 属性最直接：原生支持布尔属性，存在即只读，允许聚焦、选中、复制且值随表单提交；需配合 CSS（如 textarea:read-only）和 aria-readonly="true" 保障可访问性与视觉提示。
textarea 元素加 readonly 属性最直接
HTML 中 textarea 原生支持 readonly，只要在标签里加上这个布尔属性就生效，不需要赋值：
✅ 正确：<textarea readonly>系统生成说明</textarea>
❌ 错误：<textarea readonly></textarea> 或 <textarea readonly></textarea>——只要属性存在即只读，“false”反而会触发只读。
它允许用户聚焦、选中、复制内容，且 name 和 value 会随表单一起提交。这是和 disabled 的根本区别：后者值不提交、不可聚焦、不可复制。
表格内 textarea 只读但需视觉提示
原生 readonly 不带任何样式变化，放在表格里容易被当成可编辑字段。必须用 CSS 主动区分：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
textarea:read-only伪类统一处理：textarea:read-only { background-color: #f9f9f9; cursor: not-allowed; } - 避免仅靠颜色（色觉障碍用户无法识别），
cursor: not-allowed是关键反馈 - 对 IE 等不支持
:read-only的旧浏览器，需 JS 检测并 fallback 加 class：textarea[readonly]+ 对应 CSS 规则 - 务必加
aria-readonly="true"，否则屏幕阅读器无法播报状态
表格中其他元素（如 td / div）不能靠 readonly 实现只读
很多人把 readonly 错加在 <td>、<code><div> 或自定义容器上，这完全无效——浏览器直接忽略该属性：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code>readonly 仅对 <input>（text 类）和 <textarea></textarea> 生效
<select></select>、<button></button>、<output></output> 等设了也无反应contenteditable="true" 的 <div>，必须改用 <code>contenteditable="false"，再配 tabindex="-1" 防键盘聚焦
disabled 替代——它会让整个单元格语义错乱，且破坏表格结构可访问性JS 动态控制 textarea 只读状态的坑
在表格行内动态切换（比如点击“编辑”按钮后某列 textarea 可编辑），JS 写法稍有不慎就会失效：
- ✅ 正确：
el.readOnly = true或el.readOnly = false（注意 JS 属性名是readOnly，首字母大写） - ❌ 错误：
el.setAttribute('readonly', 'readonly')—— 旧版 Safari 可能不触发行为更新 - 检查状态必须用
if (el.readOnly)，不是el.hasAttribute('readonly')（DOM 属性和 HTML 属性不同步） - 如果表格用了 React/Vue，模板中写
readonly可能被框架忽略；React 必须用readOnly={true}（驼峰），Vue 动态绑定要写:readonly="isReadonly"
真正容易被忽略的是混合交互场景：比如一个 textarea 初始只读，但权限变化后放开编辑——此时光切 readOnly 不够，还得确保它仍保留在 tab 顺序中（别误加 tabindex="-1"），否则键盘用户无法到达该字段。
