placeholder仅支持和，且限于text、search、tel、url、email、password、number等类型；date/time行为不一致；hidden、checkbox、radio、file等完全不支持；不可替代label，无语义权重，不参与验证，样式需用多浏览器前缀伪元素控制。
直接加 placeholder 属性就行，但不是所有地方都能用，也不是加了就万事大吉。
哪些元素能用 placeholder
只支持 <input> 和 <textarea></textarea>，且仅限特定 type 值：
-
text、search、tel、url、email、password、number -
date、time等日期类 type 在多数浏览器中也支持，但行为不一致（比如 Chrome 显示 placeholder，Safari 可能忽略） -
hidden、checkbox、radio、file、range等类型完全不支持，加了也无效 <div contenteditable="true"> 或普通 <code><div> 加 <code>placeholder属性——浏览器会静默忽略，不会报错也不会显示placeholder不是label的替代品这是最容易被忽视的语义陷阱：
- 屏幕阅读器通常不读取
placeholder文本，尤其在未聚焦时；用户可能根本不知道这个字段要填什么 - 用户开始输入后，提示立即消失，无法回看格式要求（比如“138-8888-8888”）
- 如果只靠
placeholder="必填"，等于把关键业务规则藏在视觉暂态里，违反 WCAG 3.3.2 原则 - 正确做法：始终配
<label for="xxx"></label>，把格式说明、必填标识、错误提示等放在 label 附近或<small></small>中
CSS 自定义
placeholder样式要注意兼容性不同浏览器用不同伪元素实现，只写
input::placeholder会漏掉旧版 Firefox 和 IE：立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari/Opera：支持
input::placeholder，也认input::-webkit-input-placeholder - Firefox 19+：需
input::-moz-placeholder - IE10–11：必须用
input:-ms-input-placeholder - Edge 12–18：部分支持
::placeholder，但更稳的是同时写::-webkit-input-placeholder和::-moz-placeholder - 别用
!important强行覆盖——先检查是否漏写了某个浏览器前缀，再确认选择器权重是否足够
input::placeholder, input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: #777; font-style: normal; }JavaScript 动态操作
placeholder要小心时机通过 JS 读写没问题，但要注意 DOM 状态和框架响应逻辑：
- 读取：
el.placeholder直接返回字符串值，安全 - 设置：
el.placeholder = "新提示"立即生效，但不会触发input或change事件 - 在 React/Vue 中，不要用
placeholder控制显隐逻辑——它不响应 state 变化，只看原生value是否为空。想实现“输入中显示辅助提示”，得用额外<span></span>层 +focus/input事件手动控制 - 中文输入法下 placeholder 可能闪烁：这是浏览器对
compositionstart事件处理差异导致的，不是 bug，也不建议 hack 修复
真正容易被忽略的是：placeholder 的语义权重极低，它既不参与表单验证，也不影响可访问性树结构，更不能作为交互逻辑的判断依据。把它当成纯视觉提示，其他该写的 label、aria-label、验证规则，一个都不能少。
- 屏幕阅读器通常不读取
