HTML表格中的文本域只读状态设置方法-html教程-PHP中文网

textarea 元素加 readonly 属性最直接：原生支持布尔属性，存在即只读，允许聚焦、选中、复制且值随表单提交；需配合 CSS（如 textarea:read-only）和 aria-readonly="true" 保障可访问性与视觉提示。

html表格中的文本域只读状态设置方法

textarea 元素加 readonly 属性最直接

HTML 中 textarea 原生支持 readonly，只要在标签里加上这个布尔属性就生效，不需要赋值：

✅ 正确：系统生成说明
❌ 错误：或 ——只要属性存在即只读，“false”反而会触发只读。

它允许用户聚焦、选中、复制内容，且 name 和 value 会随表单一起提交。这是和 disabled 的根本区别：后者值不提交、不可聚焦、不可复制。

表格内 textarea 只读但需视觉提示

原生 readonly 不带任何样式变化，放在表格里容易被当成可编辑字段。必须用 CSS 主动区分：

DeepBI DHTML 页面生成器

生成可在 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 错加在 、

 或自定义容器上，这完全无效——浏览器直接忽略该属性：

readonly 仅对 （text 类）和  生效

、、 等设了也无反应
如果表格里用了 contenteditable="true" 的 ，必须改用 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"），否则键盘用户无法到达该字段。