placeholder属性必须直接写在textarea标签内才生效,加在td等容器上无效;需设min-height防截断,配合aria-label提升可访问性,且不参与表单提交。

表格里放 <textarea></textarea> 时,placeholder 属性能加提示文字,但直接写在 <td> 上无效——提示必须挂在表单控件自身,不是容器。
<h3>textarea 的 placeholder 必须写在标签内部</h3>
<p>很多人把 <code>placeholder 错加到 <td> 或 <code><tr> 上,结果毫无反应。它只对 <code><input> 和 <textarea></textarea> 生效,且必须作为原生属性出现在控件标签里。
-
<td><textarea placeholder="请输入备注(最多200字)"></textarea></td>✅ 正确 -
<td placeholder="别忘了填"><textarea></textarea></td>❌ 无效 -
<textarea>placeholder="xxx"</textarea>❌ 不是 HTML 属性,是字符串内容
表格中 placeholder 显示不全?检查 overflow 和 white-space
表格单元格默认 overflow: hidden,如果 <textarea></textarea> 高度不够或父级 <td> 被压缩,placeholder 文字可能被截断或根本不可见。
<ul>
<li>给 <code><textarea></textarea> 显式设 min-height(如 min-height: 60px),避免塌缩
<td> 没有 <code>text-overflow: ellipsis 或 white-space: nowrap
resize: none 禁止拖拽,记得留足初始空间,否则 placeholder 压缩成“…”想让 placeholder 更明确?配合 aria-label 或 title 补充语义
placeholder 是临时提示,不替代标签。屏幕阅读器通常不读它,纯靠视觉的用户也可能忽略。真正需要可访问性的场景,得补一层明确语义。
立即学习“前端免费学习笔记(深入)”;
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 用
aria-label直接说明用途:<textarea aria-label="订单备注(支持换行)" placeholder="例如:请勿使用快递柜"></textarea> - 如果已有
<label></label>,优先用for/id关联,比title可靠得多 -
title在<textarea></textarea>上虽能触发 tooltip,但移动端失效、键盘用户难触达,仅作备用
最易被忽略的一点:placeholder 不是“默认值”,也不参与表单提交。用户没输入就提交,字段就是空字符串或 null —— 别指望它兜底校验或填充数据。


















