placeholder仅支持<input>（type为text、search、tel、url、email、password、number）和<textarea>，不支持<select>、<input type="date">等其他元素；它仅为视觉提示，不可替代label或value。
哪些元素和 type 支持 placeholder
只有 <input>（type 为 text、search、tel、url、email、password、number）和 <textarea> 原生支持 placeholder 属性。其他情况基本无效：
-
<select>、<input type="date">、<input type="time">、<input type="file">、<input type="checkbox">等均不支持，强行加属性无任何效果 - 自定义封装组件（如 Vue 的
<my-input>或 React 的Input）若未将placeholderprop 显式透传至内部原生<input>，则不会显示提示 -
contenteditable="true"元素或<div>上写placeholder属性——浏览器完全忽略，开发者工具里能看到但不渲染
placeholder 不是 value，别当默认值用
placeholder 是纯视觉提示，用户未输入时 input.value 仍是空字符串（''），不是 placeholder 的内容。后端收不到它，JS 判断 input.value === '' 也无法区分“用户没点过”和“用户清空了”。常见误用：
- 写成
<input placeholder="张三">期望用户看到就默认填上——实际一聚焦就消失，反而干扰输入 - 表单校验逻辑依赖
input.value是否为空，却把 placeholder 当作“已有内容”误判 - 需要预填充，请用
value属性：<input value="北京">；需区分“未填”和“填了空字符串”，得靠额外状态标记（如布尔字段isTouched）
::placeholder 样式必须写全前缀
想改颜色、字体大小或透明度，不能只写 input::placeholder，旧版浏览器会失效。必须同时声明：
input::placeholder { color: #999; font-size: 14px; opacity: 1; }
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; }
input::-ms-input-placeholder { color: #999; }
注意几个坑：
立即学习“前端免费学习笔记（深入）”；
- Firefox 中
opacity必须显式设为1，否则默认半透明，和其他浏览器不一致 -
::placeholder不继承父级font-family，必须单独写，否则可能变成等宽字体 - 深色模式下
#999对比度不足，建议用 CSS 变量：color: var(--placeholder-color) - 禁用
display: none或transition动画到伪元素上，部分浏览器不支持且易出错
非表单元素怎么模拟 placeholder 效果
给 <div>、<p> 或 contenteditable 元素加占位提示，不能靠 placeholder 属性。最轻量可靠的方式是用 data- 属性 + ::before：
<div class="placeholder-target" data-placeholder="暂无内容"></div>
CSS：
.placeholder-target:empty::before {
content: attr(data-placeholder);
color: #999;
font-size: 0.875em;
}
关键细节：
- 必须用
:empty，否则真实内容出现时提示文字会重叠 - 如果元素内有空格、换行或注释，
:empty不匹配，可改用:not(:has(*))（仅现代浏览器）或 JS 清理空白节点 - 不要用 JS 模拟原生 placeholder 行为（如监听 focus/blur 控制显隐）——除非要兼容 IE9，现在没必要
真正容易被忽略的是：placeholder 文本在用户开始输入后彻底消失，无法回溯。所有关键格式要求（如“6–20位”）、必填标识、错误说明，都必须放在 <label> 或独立提示区域，不能只塞进 placeholder 里。
