placeholder是HTML5原生属性，仅支持input（除hidden、file等类型）和textarea，添加后浏览器自动显示灰色提示文本，不参与提交、不可替代label，纯文本不解析HTML，需配合::placeholder伪元素跨浏览器定制样式。

用 placeholder 属性最直接

HTML5 原生支持在 <input> 和 <textarea> 上显示灰色提示文字，只需加 placeholder 属性即可，浏览器自动处理样式和交互逻辑。

• placeholder 的值是纯字符串，不解析 HTML；写 <b>邮箱</b> 会原样显示为文字，不会加粗
• 文本在输入框获得焦点且内容为空时仍显示，用户开始输入后自动消失
• 不适用于 <input type="file">、<input type="hidden"> 等不支持该属性的类型，强行添加无效
• 中文占位符建议用简短描述，避免过长导致截断（尤其移动端）

placeholder 文本不替代 label

很多人误以为加了 placeholder 就不用 <label>，这是常见可访问性陷阱。屏幕阅读器通常忽略 placeholder，它不能传达表单字段的语义目的。

• 必须配对使用 <label for="xxx"> 和 <input id="xxx">，或把 <input> 包在 <label> 里
• 若仅靠 placeholder，键盘用户 Tab 到该输入框时，无法得知“这是密码还是确认密码”
• 某些浏览器（如旧版 Safari）在 autofill 后会清空 placeholder，但 label 始终可见

样式控制：用 ::placeholder 伪元素

默认灰色太浅或字体太小？可通过 CSS 的 ::placeholder 伪元素调整，但注意各浏览器前缀差异。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 现代浏览器支持标准写法：input::placeholder { color: #666; font-size: 14px; }
• Chrome/Safari/Edge 需要 ::-webkit-input-placeholder，Firefox 是 ::-moz-placeholder，老版本可能需额外前缀
• 不要用 opacity 模拟灰度，会导致整个占位文本不可读；优先用 color 控制明暗
• 设置 font-style: italic 可增强提示感，但别改 font-family——保持与输入框一致，避免布局跳动

需要动态控制 placeholder 时怎么办

如果占位文本要随状态变化（比如切换语言、根据用户角色显示不同提示），不能只靠 HTML 属性静态定义，得用 JS 动态更新。

立即学习“前端免费学习笔记（深入）”；

• 直接操作 DOM：document.getElementById('search').placeholder = '搜索商品或品牌';
• 注意：修改 placeholder 不会触发 input 或 change 事件，它是纯展示属性
• React/Vue 等框架中，绑定 placeholder 到响应式变量即可，但记得防空值——设成 null 或空字符串会让提示消失，不是还原默认值
• 不要用 JS 模拟 placeholder（比如绝对定位覆盖一个 <span>），既增加复杂度又破坏原生聚焦/输入逻辑

占位文本看着简单，但真正在意用户输入体验时，label 是否存在、placeholder 是否被正确读取、动态更新时是否留有 fallback，这些细节往往比写一行属性更费琢磨。