placeholder仅对input（text、search、tel、url、email、password、number）和textarea有效；不支持date、select、div等元素，不可替代label或value，样式须用::placeholder等伪元素控制。
哪些 input 类型支持 placeholder
只对 <input>（type 为 text、search、tel、url、email、password、number）和 <textarea> 有效；其他一律不生效。
常见误用包括：
-
<input type="date">：Chrome 等浏览器通常忽略placeholder，别指望它显示“请选择日期” -
<input type="number">：部分旧版 Safari / Firefox 不渲染，或只在空值时短暂闪现 -
<select>、<div>、自定义组件：加了placeholder属性也纯属无效字符串，DOM 中可见但无任何行为
placeholder 不是 value，也不能替代 label
placeholder 是视觉提示，用户一输入就消失，且不参与表单提交——它和 value 完全无关。
典型错误写法：<input placeholder="张三">，结果用户点进去就清空，反而破坏初始引导。
立即学习“前端免费学习笔记（深入）”；
正确做法应分清职责：
- 用
value设默认值（如搜索框预填“最近一周”），它会随表单一起提交 - 用
<label for="xxx">或aria-label做可访问性标识，屏幕阅读器不读placeholder - 必填说明、格式要求（如“6–20位字母数字”）必须放在
label里，不能只塞进placeholder
修改 placeholder 样式必须用伪元素，且前缀要写全
直接在 input 上设 color 或 font-size 对 placeholder 无效。必须用 CSS 伪元素控制，且不同内核需显式声明：
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; }
注意点：
- Firefox 默认让
placeholder半透明，其他浏览器不透明，统一加opacity: 1避免不一致 - 父级设了
font-family，::placeholder里得重写，否则可能回退到等宽字体 - 禁用
transition或display: none动画，部分浏览器不支持且易导致闪烁
JavaScript 动态设置 placeholder 的边界在哪
JS 可以安全读写 el.placeholder，但它不触发任何事件，也不响应状态变化。
例如：
-
el.placeholder = "新提示"立即生效，但不会触发input或change事件 - 在 React/Vue 中，不要用
placeholder控制错误提示逻辑（比如“邮箱格式错误时显示红色 placeholder”）——它只看value是否为空，不感知校验状态 - 框架中若依赖 placeholder 显隐做 UI 反馈，大概率会掉坑：用户输入后清空再聚焦，提示就没了，且无法还原
真正需要动态提示的场景，应该用独立的 <span class="error"> 或 title 属性配合 setCustomValidity()。
