disabled 的 textarea 值不提交，readonly 才能提交且禁编辑；需配 CSS 实现灰化，禁用时务必用 disabled 而非仅样式，fieldset disabled 可批量控制但 form 不支持。

textarea 加 disabled 属性就变灰，但值不提交

直接在 textarea 标签上加 disabled 属性，浏览器会自动灰化、禁用聚焦和输入，且表单提交时完全忽略该字段。这是最轻量、语义最正确的做法。

常见错误是误以为“灰色 = 只读”，结果后端收不到数据。记住：disabled 的 textarea 值不会出现在 FormData、serialize() 或原生表单 POST 中。

• 初始内容 → 灰色、不可编辑、不提交
• 若需提交值但禁止修改，请改用 readonly（支持 textarea）
• 别写 disabled="false" 或 disabled="" —— 只要属性存在，就禁用

想变灰又保留提交，必须用 readonly 而非 disabled

readonly 对 textarea 完全有效，它允许用户聚焦、复制、选中文本，值照常提交，但不能编辑。视觉上默认不灰，所以需要配合 CSS 强制变灰。

如果不加样式，用户可能误点进去试图修改，却没反应——这比 disabled 更难察觉问题。

• HTML：ABC123
• CSS：textarea[readonly] { background: #f5f5f5; color: #666; cursor: not-allowed; }
• 注意：不要同时加 disabled 和 readonly —— disabled 优先级更高，readonly 会被忽略

用 CSS 模拟 disabled 效果容易踩的坑

有人为绕过 disabled 不提交的问题，尝试纯 CSS 实现“看起来禁用”：比如加 pointer-events: none、opacity: 0.6、background: #eee。这种写法看似灵活，实则危险。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

它只骗过了眼睛，没骗过浏览器行为：元素仍可聚焦、仍响应键盘输入（如 Tab 进入后按 Backspace 可能删内容）、屏幕阅读器仍会朗读、移动端 touch 事件可能意外触发、表单序列化仍包含它的值。

• 绝对避免：
• 如果必须用 JS 控制交互逻辑，也请同步设置 textarea.disabled = true，而不是只靠样式
• 自定义禁用状态时，务必补上 aria-disabled="true" 和 tabindex="-1" 才算基本可访问

fieldset 包裹 textarea 后禁用，效果等同于直接 disabled

把 textarea 放进 fieldset，再给 fieldset 加 disabled，其内部所有可交互控件（包括 textarea）都会被统一禁用。效果和直接在 textarea 上加 disabled 一致，且值同样不提交。

这个技巧适合批量控制一组字段，但要注意：legend 文字不受影响，仍可点击；如果想让整个区域（含标题）都视觉弱化，得额外加 CSS。

• 有效写法：
  备注
• 无效写法：
  —— form 元素根本不支持 disabled 属性
• JS 动态控制：document.querySelector('fieldset').disabled = true 即可启用/禁用整块

真正关键的分水岭不在“怎么变灰”，而在“要不要提交值”。选错属性，后端就收不到字段——这种问题上线后才暴露，调试成本远高于写一行 readonly + 三行 CSS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！