readonly的textarea默认无视觉变化，因浏览器仅禁编辑不改样式；须用textarea[readonly]手动加背景色、灰字、not-allowed光标等样式，并配合aria-readonly="true"增强可访问性。
readonly 的 textarea 本身不会自动高亮，必须手动加样式——浏览器只禁编辑，不改视觉。
为什么 textarea[readonly] 默认看不出是只读的
原生 textarea 加了 readonly 后，光标还能闪、文字能选中、背景色和可编辑时一模一样。用户根本分不清它是“锁住了”还是“还没点进来”。这不是 bug，是规范行为。
- 只读状态不触发任何默认视觉反馈（不像
:disabled会变灰） -
textarea:read-only伪类在 Safari 和旧版 Edge 中支持不稳定，不能全靠它 - 用
[readonly]属性选择器最稳妥，所有浏览器都认
怎么给 readonly textarea 加可靠高亮样式
推荐直接用属性选择器，配合显式声明的视觉提示：
textarea[readonly] {
background-color: #f9f9f9;
border-color: #ccc;
color: #666;
cursor: not-allowed;
user-select: none;
}
-
user-select: none防止用户意外复制（如果业务真不需要复制） - 别只依赖
background-color：色觉障碍用户可能看不到区别，建议加border-style: dashed或旁边放小图标 - 若需语义强化，加上
aria-readonly="true"，读屏软件会播报“只读”
React/Vue 里 textarea readonly 不生效的坑
框架会接管属性绑定，原生写法容易失效：
- React 必须写
readOnly={true}（驼峰，且值为布尔true），写readonly或字符串"readonly"都无效 - Vue 模板中
readonly可以直接写，但动态绑定要用:readonly="isReadonly" - SSR 渲染后，客户端 hydration 可能覆盖服务端写的
readonly，最终 DOM 里得用 DevTools 确认是否真存在该属性
readonly textarea 高亮后还要注意什么
高亮只是视觉提示，不等于行为锁定：
- 即使加了
cursor: not-allowed，键盘仍可通过Tab进入并触发focus，如需完全禁焦，得加tabindex="-1" - 移动端 Safari 对
user-select: none支持不一致，部分机型仍可长按呼出菜单，必要时监听touchstart并preventDefault - 如果这个
textarea是表单一部分，确保后端接收逻辑没把只读字段当成缺失项——readonly字段值仍会提交
真正容易被忽略的是：样式高亮和行为控制是两件事。你看到的“高亮”，只是告诉用户“别动它”，而阻止用户动它，还得靠属性、事件拦截、甚至 tabindex 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
