placeholder仅支持text、search、tel、url、email、password、number和textarea，不支持select、date、file等；非默认值，不可替代label，改样式须用::placeholder伪元素且补全浏览器前缀。
placeholder 属性不是“加了就能用”，它只对特定 input 类型生效，且不能替代语义或无障碍需求。直接写 placeholder="用户名" 很简单，但错用会导致提示不显示、颜色失效、移动端截断，甚至影响可访问性。
哪些 input 类型支持 placeholder
只对以下类型原生支持，其他一律无效：
-
text、search、tel、url、email、password -
number—— 但旧版 Android WebView 和部分 iOS Safari 可能不渲染，慎用于关键提示 -
textarea—— 完全支持
这些类型加了也白加：
-
select（无placeholder属性） -
input type="date"（Chrome 常忽略，Safari 不显示） -
input type="file"、checkbox、radio、hidden、submit
placeholder 不是默认值，也不能当 label
常见错误是把它当初始值或必填说明用：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
-
placeholder不参与表单提交，也不影响value初始值（始终为空字符串） - 用户一聚焦就消失，所以“必填”“6–20位”这类约束不能只放这里
- 屏幕阅读器基本不读
placeholder，每个input必须配label或aria-label - 别重复
label文字，比如label已写“手机号”，placeholder就该写“11位数字，如138-1234-5678”
改颜色/字体必须用伪元素，且前缀不能少
color 或 font-size 直接写在 input 上对 placeholder 完全无效——它不继承样式，也不是真实 DOM 节点。
- 必须用
::placeholder及其兼容写法：::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder - Firefox 默认设了
opacity: 0.53，不显式写opacity: 1就会发灰 - 只支持文本类属性：✅
color、font-size、font-family、text-transform；❌background-color、padding、border都无效 - 想让文字“靠右”或“居中”，得调
input自身的text-align或padding，别动::placeholder
JS 动态设置 placeholder 的边界在哪
可以安全读写 el.placeholder，但它不触发事件，也不响应状态变化：
-
el.placeholder = "新文案"立即生效，但不会触发input或change事件 - React/Vue 中别用它控制显隐逻辑（比如“出错时变红色提示”），因为它的显示只取决于
value是否为空 - 频繁 JS 赋值可能引发安卓 WebView 重绘闪动，建议预设多组文案 +
class切换 - 动态设置后，伪元素样式仍需提前定义好，否则新文案可能沿用浏览器默认浅灰
真正容易被忽略的是：placeholder 的语义缺失和跨浏览器渲染差异。它看起来只是个灰色小字，但涉及可访问性、移动端适配、框架响应逻辑，稍不注意就变成“写了等于没写”。
