textarea 设置 readonly 后仍能复制是正常行为，因其设计本意为禁止编辑但允许选中和复制；若需禁用复制，须结合 CSS 的 user-select: none、JS 的 copy 事件拦截及 tabindex 等多重手段。
textarea 设置 readonly 后仍能复制？这是正常行为
HTML 的 readonly 属性本意就是「禁止编辑，但允许聚焦、选中和复制」——所以用户 Ctrl+C 复制成功不是 bug，是设计如此。如果你的目标是「不可复制」，那 readonly 本身就不满足需求，必须叠加其他手段。
真正阻止复制的三类实操路径
仅靠 HTML 属性无法防复制，需组合 CSS + JS + 语义约束：
- 用
user-select: none阻断鼠标选中（Chrome/Firefox/Edge 支持，Safari ≥ 15.4 也支持）：textarea[readonly] { user-select: none; } - 监听
copy事件并event.preventDefault()（注意：仅拦截右键菜单或 Ctrl+C，不防开发者工具取值）：textareaEl.addEventListener('copy', e => e.preventDefault()); - 移除焦点能力 + 禁用键盘选择：加
tabindex="-1"并配合pointer-events: none（但会同时禁用所有交互，包括滚动）
⚠️ 注意：以上都只是前端防护，无法阻止用户打开 DevTools 直接读取 value 或 DOM 文本内容。真要防数据外泄，得靠服务端权限控制和字段脱敏。
表格里嵌 textarea 的只读陷阱
很多人把 textarea 放进 <td> 里后加 <code>readonly，却发现样式错乱、高度塌陷或失去垂直居中。原因有二：
立即学习“前端免费学习笔记（深入）”；
-
textarea默认display: inline-block，在<td> 中会受 <code>vertical-align影响，建议显式设vertical-align: top或middle - 表格单元格默认
overflow: hidden，若textarea内容超出行高又没设resize: none，拖拽手柄可能被裁剪；加resize: none; overflow: auto;更稳妥 - 别给
<td> 自己加 <code>readonly—— 它根本不识别这个属性，纯属无效写法contenteditable="false"不适用于textareatextarea是原生可编辑控件，不走contenteditable机制。给它加contenteditable="false"不起作用，浏览器直接忽略。唯一合法且语义正确的只读方式，仍是原生readonly属性（静态写法）或el.readOnly = true（JS 动态控制）。如果业务上真要求「显示像文本域，但完全不可操作+不可复制+不可聚焦」，更合理的解法是：用普通
<div> 替代 <code>textarea，配white-space: pre-wrap+overflow: auto模拟换行滚动，并通过tabindex="-1"+user-select: none+pointer-events: none组合封死所有入口——但此时它已不是表单控件，name/value不会自动提交，需手动塞进 FormData。
