placeholder仅对text、search、email、tel、url、password和textarea有效，其他如checkbox、radio、file、hidden、select、button及contenteditable元素均不支持；它仅为视觉提示，不参与交互、不触发事件、不校验输入。
placeholder 属性不能引导用户操作，它只是视觉提示，不参与交互逻辑、不触发事件、不校验输入——想靠它实现格式引导或行为控制，一定会出问题。
哪些 input 类型支持 placeholder
只对原生可编辑文本类控件有效：text、search、email、tel、url、password、textarea。其他如 checkbox、radio、file、hidden、select、button 或任何带 contenteditable="true" 的元素，设了 placeholder 属性也完全无效。
常见误用场景：
- 在 Vue/React 封装的输入组件上直接透传
placeholderprop，但内部没渲染到原生<input>上 - 给
<div class="custom-input"> 加 <code>placeholder="xxx"，浏览器无视 - 用
input[type="number"]时依赖placeholder显示格式（如"123-456-7890"），但 iOS Safari 会截断或显示异常
placeholder 样式必须用 ::placeholder 伪元素
它不继承父级字体设置，也不响应普通 class 的 color 或 font-size。不写全前缀，Firefox 和旧版 Safari 就会回退到系统默认等宽字体 + 半透明灰。
正确写法（兼容性兜底）：
input::placeholder {
color: #999;
font-size: 14px;
opacity: 1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
注意：opacity: 1 很关键——Firefox 默认是 opacity: 0.5，而 Chrome/Safari 是不透明，不统一就会出现同一页面 placeholder 颜色深浅不一。
JavaScript 动态设置 placeholder 要避开三个坑
虽然 el.placeholder = "新文案" 立即生效，但实际使用中容易踩空：
- 时机错误：DOM 没挂载完成就操作，
el是null；在 React/Vue 中，别在useEffect或mounted之前读写 - 语义错位：用它替代
label或做必填提示（如"必填"），用户输入后提示消失，无障碍和表单校验全失效 - 框架陷阱：在受控组件里改
placeholder，但 value 由 state 控制，placeholder 只看 DOM 的value是否为空——state 更新但 DOM 未同步时，placeholder 可能错误显示或隐藏
真正需要“引导用户操作”时该用什么
placeholder 不是交互入口，它连点击都不响应。要达成引导效果，得组合其他机制：
- 格式提示：用
inputmode="tel"触发数字键盘，配合pattern+title做提交前校验（注意type="number"会忽略pattern） - 实时格式化：手机号加横线、身份证自动补位，必须监听
input事件 + 正则处理，或引入imask/vanilla-text-mask这类库 - 浮动标签（floating label）：当用户聚焦或输入非空时，把提示文字从框内移出并固定在上方，才能兼顾视觉引导与语义保留
- 辅助说明：在
<small></small>或<span aria-live="polite"></span>里放格式示例（如"格式：138-XXXX-XXXX"），比 placeholder 更可靠
最常被忽略的一点：placeholder 文本在 iOS Safari 中可能被缩略为 "请输入…"，且无法通过 CSS 控制；如果文案关键（比如法律要求的提示语），必须放在 label 或独立文本节点里，而不是塞进 placeholder。
