textarea加required后表单仍能提交，常见原因包括缺少name属性、form配置错误、textarea被禁用、仅输入空格或换行符；需设name、JS校验trim后内容，并后端二次验证。
textarea 本身不支持 required 属性的“视觉必填反馈”（比如自动高亮边框、阻止提交），但只要加了 required，浏览器原生校验就能生效——前提是它被正确包裹在 form 中且未被禁用。
textarea 加 required 后表单仍能提交？
常见错误现象是：用户点了提交按钮，页面没反应或直接跳转，textarea 没弹出“请填写此字段”提示。
这通常不是 required 失效，而是以下任一情况导致：
-
textarea缺少name属性 → 浏览器忽略该校验（校验只作用于有name的可提交控件） - 父级
form的method或action不合法，或被 JS 阻止了默认行为但没手动触发checkValidity() -
textarea被设为disabled或readonly→required自动失效 - 用户输入了空格或换行符 →
required认为“已填写”，需配合pattern或 JS 做 trim 后校验
建议做法：
- 始终为
textarea设置name="content"类似有意义的名称 - 在提交前用 JS 主动检查：
if (!document.querySelector('textarea').value.trim()) { alert('内容不能为空'); } - 不依赖纯 HTML 校验做关键业务逻辑，后端必须二次验证
表格中嵌套 textarea 时样式错位或撑开单元格？
表格单元格（td）默认是 vertical-align: middle，而 textarea 是替换元素，默认基线对齐，容易造成视觉偏移；同时其 rows 和 cols 是建议值，实际尺寸受 CSS 影响大。
典型表现：
立即学习“前端免费学习笔记（深入）”；
-
textarea顶部留白过大，或底部悬空 - 单元格高度被拉得过高，影响整行对齐
- 响应式下宽度溢出
td边界
解决要点：
- 显式设置
textarea的display: block和width: 100%（否则可能只占内容宽） - 用
vertical-align: top或baseline统一td和textarea对齐方式 - 限制最大高度并启用滚动：
textarea { max-height: 120px; overflow-y: auto; resize: vertical; } - 避免在
td上设固定height，改用min-height或让表格自动适应
如何让表格里的 textarea 支持「占位提示 + 必填标识 + 错误状态」联动？
纯 HTML 无法自动把 :invalid 状态透传到父 td，但可以用 CSS + 少量 JS 实现轻量反馈：
- 用
placeholder提供引导文案，但注意它不替代label（无障碍要求） - 必填标识（如星号）建议放在
label里，而不是靠 CSS 伪元素硬加 - 错误态样式可这样写：
textarea:invalid:not(:placeholder-shown) { border-color: #d32f2f; } - 若需高亮整个单元格，JS 监听
input和blur：el.addEventListener('blur', () => { el.closest('td').classList.toggle('error', !el.checkValidity()); });
关键细节：
-
:placeholder-shown能排除 placeholder 还在时的误判 -
checkValidity()返回false仅当字段为空且required存在 - 不要给
textarea设minlength（IE/旧 Edge 不支持），改用 JS 校验长度
表格中放 textarea 看似简单，真正麻烦的是边界情况：空格输入、粘贴富文本、移动端软键盘遮挡、屏幕阅读器聚焦顺序。这些不会在写完 required 就自动解决。
