placeholder属性仅适用于和，非表单元素需用data-*属性配合CSS伪元素实现；contenteditable元素须用JS+辅助元素模拟；placeholder不可替代，且需满足可访问性要求。
HTML 中 placeholder 属性只能用在 <input> 和 <textarea></textarea> 上
placeholder 不是“文档级”属性，它只作用于可编辑的表单控件。试图给 <div>、<code><p></p> 或整个 加 placeholder，浏览器会直接忽略——它根本不是这些元素的合法属性。
常见错误现象：<div placeholder="请输入内容"></div> 在开发者工具里能看到这个属性，但不会显示任何提示文字，也不触发任何行为。
-
placeholder是表单控件的原生属性，语义上表示“用户输入前的临时提示”，不是通用占位文案容器 - 它只在元素获得焦点前、且值为空时显示；一旦用户开始输入或元素有
value/textContent，就自动隐藏 - 不支持 HTML 标签，纯文本；换行、样式、图标都得靠 JS + CSS 模拟（比如用
data-placeholder配合伪元素）
想让非表单元素显示占位文本？用 data- 属性 + CSS ::before
这是最轻量、兼容性最好、也最可控的方式。核心思路：把提示文案存在自定义属性里，用 CSS 控制是否显示。
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="placeholder-target" data-placeholder="暂无内容"></div>
CSS：
.placeholder-target:empty::before {
content: attr(data-placeholder);
color: #999;
font-size: 0.875em;
}
- 必须配合
:empty伪类，否则提示文字会和真实内容重叠 -
data-placeholder只是约定名，你写成data-hint也完全没问题 - 注意：如果
<div> 里有空格、换行符或注释，<code>:empty就不匹配——得用 JS 清理或改用:not(:has(*))（仅现代浏览器）contenteditable元素怎么加 placeholder？别信placeholder属性<div contenteditable="true"></div>看似像输入框，但它不支持placeholder属性。强行加了也没效果。正确做法是监听元素内容变化，用 JS 控制一个辅助
<span></span>的显隐：<div contenteditable="true" class="editable-with-placeholder"></div> <span class="placeholder-text">请输入正文...</span>
CSS 让它视觉上叠在一起：
.editable-with-placeholder { position: relative; } .placeholder-text { position: absolute; pointer-events: none; color: #999; left: 6px; top: 6px; }- JS 要监听
input和focus/blur，判断innerText.trim() === ''来切换display - 别用
textContent判断，它会把<br>当作内容，导致 placeholder 错误隐藏 - 移动端 focus 时机不稳定，建议加
setTimeout延迟检测，避免闪烁
placeholder 文本的可访问性（a11y）容易被忽略
屏幕阅读器默认会读出
placeholder，但它**不能替代<label></label>**。W3C 明确指出：placeholder 不是标签，也不提供持久性描述。- 如果去掉
<label></label>，只靠placeholder，视障用户可能不知道这个输入框是干啥的 - placeholder 文字颜色太浅（如
#ccc）、对比度不足，会违反 WCAG 1.4.3 标准 - 不要把必填项说明塞进 placeholder（例如 “用户名（必填）”），用户一输入就消失，失去关键信息
真正需要的是：每个
<input>都配<label for="xxx"></label>，placeholder 仅作补充提示。复杂场景下，用aria-describedby关联额外说明更稳妥。 - JS 要监听
