placeholder仅支持text、search、tel、url、email、password、number及textarea；日期类、复选框、单选框、文件、隐藏域、提交按钮及select均不支持；非input/textarea元素上设置无效。
直接在 <input> 或 <textarea> 标签里加 placeholder 属性，值设为字符串即可，浏览器原生支持，不用 JS、不改 DOM 结构，但必须注意元素类型和语义边界。
哪些 input type 能用 placeholder
placeholder 仅对以下类型生效：text、search、tel、url、email、password、number；textarea 也完全支持。
-
type="date"、type="time"、type="month"等日期类控件 —— 大部分浏览器（包括 Chrome 最新版）不显示placeholder，属于“写了也白写” -
type="checkbox"、type="radio"、type="file"、type="hidden"、type="submit"等 —— 完全不支持，HTML 规范明确排除 -
<select>元素 —— 无效，正确做法是加一个<option disabled value="">请选择</option> - 自定义组件或
<div>上写placeholder属性 —— 浏览器静默忽略，不会报错也不会渲染
placeholder 不是 value，也不能替代 label
placeholder 是纯视觉提示，只在 value 为空时显示，用户一输入就消失，且不参与表单提交、不触发校验、不被屏幕阅读器稳定读出。
- 别写成
<input placeholder="张三">当默认值用 —— 用户点进去就清空，体验反向干扰 - 每个
<input>必须配<label for="xxx">或aria-label，否则可访问性失败 - 格式要求（如“6–20位”）、必填说明、错误状态提示 —— 不能只靠
placeholder，它一输就没了，用户根本记不住 -
placeholder文本不会出现在 FormData 或form.elements.xxx.value中，value初始值始终是空字符串
修改 placeholder 颜色或样式必须用伪元素
直接写 input { color: #666 } 对 placeholder 完全无效，因为它不是文本节点，而是由浏览器用伪元素独立渲染的。
立即学习“前端免费学习笔记（深入）”；
- 必须四套前缀都写，顺序建议：先旧后新，避免被覆盖
input::-webkit-input-placeholderinput::-moz-placeholderinput:-ms-input-placeholderinput::placeholder - Firefox 默认带
opacity: 0.53，不显式写opacity: 1会导致颜色发灰 - 字体继承常失效，如果父级设了
font-family，::placeholder里得显式重写，否则可能变成等宽字体 - 禁用
transition、display: none或background—— 这些属性在伪元素上会被浏览器静默忽略
React/Vue 中动态更新 placeholder 容易卡住
框架绑定本身没问题，但常见问题出在初始值或响应链断裂：传入非字符串、计算属性未正确定义、严格模式跳过属性设置等。
- React 中若
placeholder={text}的text是null或undefined，React 18 严格模式可能跳过 DOM 属性设置，导致 placeholder 没渲染 - Vue 中若
:placeholder="computedText"的computedText没声明为computed，或依赖没监听到，就会一直卡在初始值 - 统一解法：确保传入值始终是字符串，比如
placeholder={text ?? ""}或:placeholder="String(text)" - 调试时不要只看 JS 变量，要直接检查渲染后的 DOM 元素是否存在
placeholder属性
最常被忽略的一点：placeholder 的存在感极弱 —— 它既不参与逻辑，也不承载语义，只负责“第一眼引导”。一旦你开始用它表达状态（比如错误时变红、有值时隐藏），就已超出它的设计边界，该换方案了。
