placeholder不是默认值，不参与提交且屏幕阅读器不稳定读出；仅对input（text/search/tel/url/email/password/number）和textarea有效，type="date"、select等无效。
直接写 placeholder 属性就行，但写对不等于用对——它不是默认值，不参与提交，也不被屏幕阅读器稳定读出。
哪些元素和 type 能用 placeholder
只对两类原生控件生效：<input>（type 为 text、search、tel、url、email、password、number）和 <textarea>。
-
<input type="date">、<select>、<input type="checkbox">、<div>上加placeholder属性完全无效，浏览器忽略 -
type="number"在部分 Android WebView 或旧 Safari 中可能不显示提示文字 -
type="password"的 placeholder 文字在 Chrome 里会被掩码（●●●），Firefox 则显示明文，行为不一致
为什么 placeholder 不能替代 <label>
屏幕阅读器通常不读 placeholder 内容，它没有语义，纯属视觉辅助。用户用键盘 tab 切换焦点时，若没配 <label>，辅助工具根本不知道这个输入框是干啥的。
- 必须用
for/id关联：<label for="email">邮箱地址</label><input id="email" placeholder="example@domain.com"> - 或嵌套写法：
<label>手机号<input placeholder="11位数字"></label> - 别在
placeholder里重复<label>文字，比如<label>用户名</label>配placeholder="用户名"—— 应该写成placeholder="例如:zhangsan2024"
改颜色、字体、透明度必须用伪元素
直接给 <input> 设 color 对 placeholder 完全无效。它由浏览器用伪元素独立渲染，且各引擎前缀不同。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明四套规则：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 务必加
opacity: 1—— Firefox 默认半透明（约 0.53），Chrome 不透明，不统一会导致颜色深浅不一 -
::placeholder只支持文本类样式（color、font-size、opacity等），不支持padding、background、border，写了也静默忽略
React/Vue 里动态更新 placeholder 失效怎么办
框架绑定本身没问题，但容易因初始值或响应链断裂导致残留或不更新。
- React 中若
placeholder={text}的text初始为null或undefined，React 18 严格模式可能跳过 DOM 属性设置，结果 placeholder 没渲染或卡在旧值 - Vue 中若
:placeholder="computedText"未正确定义为computed或未监听依赖，就会一直用初始值 - 统一原则：确保传入值始终是字符串，比如
placeholder={text ?? ""}或:placeholder="String(text)" - 调试时直接检查渲染后的 DOM 元素是否存在
placeholder属性，而不是只看 JS 变量
最常被忽略的其实是移动端：iOS Safari 对 placeholder 垂直对齐极其敏感，容易截顶、偏上或缩略；Android 键盘弹出后又可能把它顶出可视区。这些不是语法问题，而是真实设备上的渲染边界，得靠 height/line-height 显式对齐和手动真机验证才能守住。
