placeholder属性是HTML原生支持的输入框提示文字方案，仅在为空且未聚焦时显示，需配合label或aria-label确保无障碍，样式须用::placeholder伪元素控制，不参与表单验证。
用 placeholder 属性最直接
HTML 原生就支持文本框默认提示文字，不需要 JS 或 CSS 模拟。关键就是 placeholder 这个属性，它只在输入框为空且未获得焦点时显示，用户一点击或输入就自动消失。
常见错误是把它写成 value="提示文字" —— 那会真把文字当默认值提交，而且清空后还得手动删，完全不是提示效果。
<input type="text" placeholder="请输入用户名"><textarea placeholder="请写下您的意见..."></textarea>- 支持所有可输入的表单控件：
input[type="email"]、input[type="search"]等
placeholder 的样式控制要靠 ::placeholder
默认灰色文字太浅、字号太小、字体不匹配？不能用 color 直接写在元素上，必须用伪元素选择器。
不同浏览器前缀还没完全统一，建议同时写全：
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: #999;
font-size: 14px;
}
input::-webkit-input-placeholder { /* Chrome/Edge/Safari */
color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #999;
}注意：Firefox 在 focus 状态下默认会隐藏 ::-moz-placeholder，如果想保持显示，得额外加 opacity: 1。
placeholder 不是无障碍替代方案
屏幕阅读器对 placeholder 支持不稳定，有些读不出，有些只在聚焦时读一次，更多时候被当成装饰性内容跳过。它不能代替 label。
- 必须配
<label for="xxx">用户名</label>+<input id="xxx"> - 如果视觉上不想显示 label，可用
aria-label或aria-labelledby补充语义 -
placeholder文字也不该承担关键说明，比如“密码需含大小写字母和数字”这种必须放 label 旁或用aria-describedby
兼容性与动态修改的坑
IE10+、Edge12+、Chrome4+、Firefox4+ 都支持，但 IE9 及更早版本完全不识别 placeholder —— 如果必须兼容，得用 JS 模拟（比如监听 focus/blur 切换 value 和 class）。
动态改 placeholder 值本身没问题：el.placeholder = "新提示"，但要注意：
- React/Vue 等框架里别直接操作 DOM 属性，应走 state 或绑定机制
- 某些老安卓 WebView（如 Android 4.3）对
textarea的placeholder渲染有偏移或截断问题 - iOS Safari 在软键盘弹出时偶尔重绘异常，导致 placeholder 残留，加
transform: translateZ(0)可缓解
真正容易被忽略的是：placeholder 文字不参与表单验证，也不会触发 input 或 change 事件——它纯粹是视觉辅助，别指望靠它做逻辑判断。
