placeholder属性用于在input和textarea中显示浅色提示文字，仅在值为空时可见，不参与提交；仅支持text、email等文本类type，不支持checkbox等；样式须用::placeholder等兼容伪元素控制。
input 的 placeholder 属性就是干这个的
HTML 原生就支持给 <input> 设置默认提示文字，用 placeholder 属性就行。它显示在输入框内、文字颜色浅、用户一聚焦或输入就自动消失，不参与表单提交。
常见错误是把它和 value 混用——value 是真实值，会提交；placeholder 纯属视觉提示，没值时才显示，有内容就隐身。
-
placeholder只对type="text"、"email"、"search"、"tel"、"url"、"password"等文本类输入有效，type="checkbox"或"file"不支持 - 中文文案建议加空格或标点收尾（比如“请输入邮箱地址…”），避免被误认为是已填内容
- 不要用
placeholder替代<label></label>：无障碍访问依赖label关联，屏幕阅读器通常忽略placeholder
placeholder 样式怎么自定义颜色和字体
浏览器默认把 placeholder 渲染成灰色小字，但可以通过伪元素改样式。问题是各浏览器前缀不同，必须都写全，否则部分失效。
关键伪元素：::placeholder（标准）、::-webkit-input-placeholder（Chrome/Safari）、::-moz-placeholder（Firefox 19+）、:-ms-input-placeholder（IE10–11）。
input::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
注意：::-moz-placeholder 是双冒号，但 IE 的 :-ms-input-placeholder 是单冒号；Firefox 18 及更早用单冒号 :moz-placeholder，现在基本不用兼容了。
placeholder 在 React/Vue 里动态设置要注意什么
框架里用变量控制 placeholder 本身没问题，但容易踩两个坑：一是变量为 null 或 undefined 时，属性会变成 placeholder="undefined" 显示出来；二是 SSR 场景下服务端渲染和客户端 hydrate 不一致，导致闪烁。
- React 中推荐写成
placeholder={hintText ?? ""}或{hintText || ""}，避免null/undefined字面量输出 - Vue 中用
:placeholder="hintText || ''"，模板编译后能正确省略空字符串属性 - 如果提示文案需国际化，别直接写死在组件里，应从 i18n 实例取值，否则服务端首次渲染可能用错语言
placeholder 不显示？先检查这几个地方
不是所有“不显示”都是 bug，有些是预期行为或配置问题：
- 输入框设置了
type="number"且初始value="0"：某些浏览器（如 Chrome）会把0当作有效值，placeholder就不显示 —— 改成value=""或用type="text"+ 输入限制更稳妥 - CSS 中写了
input { color: transparent; }或opacity: 0，连带把placeholder也隐藏了 - 移动端 Safari 对
placeholder的 vertical-align 敏感，如果父容器用了display: flex但没设align-items，提示文字可能被裁掉上半部分
真正难调试的是 placeholder 和 focus 状态的交互逻辑——比如用户点击后又 blur，再点回来，有些老版本 Android WebView 会卡住不恢复提示，这时候就得考虑降级用 JS 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
