HTML怎样设置文档的占位文本_HTML设置文档占位文本属性【属性】-html教程-PHP中文网

placeholder属性仅适用于和，非表单元素需用data-*属性配合css伪元素实现；contenteditable元素须用js+辅助元素模拟；placeholder不可替代，且需满足可访问性要求。

html怎样设置文档的占位文本_html设置文档占位文本属性【属性】

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：

Flash Builder操作指南中文WORD版

本文档主要讲述的是Flash Builder操作指南；Flash Builder将构成应用程序的资源（文件夹和文件）组合到一个容器中，我们将其称为项目。项目包含一组属性，这些属性控制应用程序的构建方式、构建的应用程序所在的位置、调试的处理方式以及该项目于工作空间中其他项目的关系。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

下载

.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 关联额外说明更稳妥。