placeholder仅对input（text、search、tel、url、email、password、number）和textarea有效，不支持select、date、checkbox等元素；仅为视觉提示，不参与提交与校验，不可替代label，样式须用兼容各浏览器的::placeholder伪元素控制。
直接用 placeholder 属性就行，但不是所有 <input> 都能用，写错 type 或加在错误元素上，它就完全不显示——不是浏览器 bug，是规范本就不支持。
哪些 input type 支持 placeholder
placeholder 只对以下 type 生效：text、search、tel、url、email、password、number（注意：部分旧版 Safari 和 Android 浏览器对 number 渲染不稳定）。date、checkbox、radio、file、hidden、submit 等一律无效。
常见踩坑点：
- 给
<select></select>写placeholder="请选择"—— 完全没反应，正确做法是加一个<option disabled value="">请选择</option> - 在自定义封装的输入组件（比如 Vue 的
<my-input></my-input>）上直接写placeholder属性 —— DOM 里没这个原生标签，属性只是被忽略的字符串 - 用
input[type="number"]时发现提示文字不显示或一闪而过 —— 某些安卓 WebView 或 iOS Safari 15.0–15.3 存在渲染缺陷，建议 fallback 到type="text"并用inputmode="numeric"唤起数字键盘
placeholder 不是 value，也不等于 label
它只在 value 为空字符串时显示，用户一输内容就消失；提交表单时，它不会被发送，也不会参与任何校验逻辑。
容易混淆的边界：
-
<input placeholder="张三" value="李四">—— 页面显示的是 “李四”，placeholder彻底不出现 -
<input placeholder="必填项" required>—— 提交失败时浏览器报错是 “请填写此字段”，不是 “请填写必填项”，因为placeholder不参与语义校验 - 屏幕阅读器通常跳过
placeholder，所以每个输入框必须配<label for="xxx"></label>或至少带aria-label，否则视障用户根本不知道这是什么字段
怎么统一改 placeholder 的颜色和透明度
不能直接写 input { color: #666 }，必须用伪元素，而且得写全四套前缀，否则在 Firefox 或旧 Edge 里颜色会发灰或不生效。
推荐写法（顺序不能乱）：
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input:-ms-input-placeholder { color: #999; opacity: 1; }
input::placeholder { color: #999; opacity: 1; }
关键细节：
- Firefox 默认
opacity: 0.53，不显式设opacity: 1就会比 Chrome 淡很多 -
::placeholder不支持padding、background、border—— 写了也没效果，别白费劲 - 中文字体加载慢时，placeholder 可能先以等宽字体渲染再重绘，造成跳动，建议在
input上显式声明font-family
React/Vue 里动态更新 placeholder 为什么有时不生效
框架绑定本身没问题，但容易栽在初始值类型或响应式链断裂上。
典型问题：
- React 中写
placeholder={user?.name || ""}，但user是null时，React 18 严格模式可能跳过属性更新，DOM 里残留旧值 —— 改成placeholder={user?.name ?? ""}更稳妥 - Vue 中用
:placeholder="computedHint"，但computedHint依赖的 props 没触发重新计算（比如对象深层属性变化未被watch捕获）—— 直接用watch或computed显式追踪源头 - 服务端渲染（SSR）场景下，placeholder 初始值由服务端注入，客户端 hydrate 后若状态不同，可能闪一下旧提示 —— 确保 CSR 和 SSR 的初始值一致
最保险的做法：始终确保传入的是字符串，避免 null 或 undefined 直接透传到 DOM 属性上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
