placeholder属性仅对input（text、search、tel、url、email、password、number）和textarea有效，不支持select、div等元素；仅为视觉提示，不可替代label或value，且不参与表单提交与校验。
placeholder 属性只在 input 和 textarea 中有效
它不是通用提示方案，div、span 或自定义组件上加 placeholder 不会起作用。浏览器只识别原生表单控件的该属性，且仅用于空值状态下的视觉提示——一旦用户输入内容，提示自动消失，不参与表单提交。
常见误用是把它当 tooltip 或 label 用，结果发现焦点离开后提示没了，或者屏幕阅读器无法可靠读出。真正需要语义化标注时，应配 label 元素，而非依赖 placeholder。
中文 placeholder 文字被截断或显示异常
这通常是因为 CSS 中设置了 text-overflow: ellipsis、固定 width 但未设 white-space: nowrap，或字体加载失败导致 fallback 字体宽度异常。移动端尤其明显，比如 iOS Safari 对短 placeholder（如“请输入手机号”）可能默认缩放文字以适配框宽，造成模糊。
- 确保
input容器有足够宽度，避免强制换行或截断 - 显式设置
font-family，避开系统缺失中文字体的情况 - 不要用
placeholder替代label；若必须视觉隐藏label，用visually-hidden类而非display: none
placeholder 文字颜色和透明度无法统一控制
各浏览器对 ::placeholder 伪元素的支持程度不同：Chrome/Edge 支持标准写法，Firefox 需要 ::-moz-placeholder，旧版 Safari 要 ::-webkit-input-placeholder。更麻烦的是，它们的默认透明度不一致（Chrome 约 0.5，Firefox 约 0.65），直接写 color: #999 在不同环境里看起来深浅不一。
实操建议：
- 用 PostCSS 或手动补全三套伪类规则，避免只写一套导致部分浏览器失效
- 优先用
opacity控制灰度，比单纯调color更易保持对比度合规（例如 WCAG 要求文本与背景对比度 ≥ 4.5:1） - 避免在
::placeholder中使用!important——它会干扰用户自定义样式（如高对比度模式）
placeholder 在 React/Vue 等框架中动态更新不生效
React 中直接写 placeholder={dynamicText} 是可行的，但若 dynamicText 初始为空字符串或 null，某些版本 React（尤其是 18 的严格模式）可能跳过 DOM 属性更新，导致 placeholder 残留旧值或清空后不恢复。
Vue 中用 :placeholder="text" 同样要注意响应式源头是否正确追踪——比如从 props 计算而来却没设 watch 或 computed，就会卡在初始值。
- 确保绑定值始终为字符串类型，避免
null或undefined直接传入 - 在调试时检查渲染后的 DOM 是否真有
placeholder属性存在，而不是靠 React DevTools 的虚拟树判断 - 服务端渲染（SSR）场景下，placeholder 若依赖客户端状态，首次 HTML 输出会是空或默认值，需预留 hydration 后的同步逻辑
aria-live 或显式错误区块。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
