placeholder仅支持input（text、email、tel、search、url、password、number）和textarea；不支持select、checkbox、radio、file等，非表单元素如div加该属性无效，且它仅为视觉提示，非默认值或label替代品。
placeholder 不是默认值，也不是 label 替代品，它只在 input 或 textarea 为空且未聚焦时显示提示文字，一输入就消失，且不参与任何表单校验或语义识别。
哪些标签和 type 支持 placeholder
只有 input（type 为 text、email、tel、search、url、password、number）和 textarea 原生支持 placeholder；select、checkbox、radio、file、hidden、button、submit 全都不支持。
常见错误现象：
- 给
div或自定义 Web Component 标签加placeholder="xxx"，浏览器完全忽略 - 在
input type="date"上写placeholder，Chrome/Firefox 都不显示 - 用
contenteditable="true"的div模拟输入框，placeholder属性无效，必须 JS + 伪元素模拟
placeholder 和 value / defaultValue 的区别
placeholder 是纯展示文案，用户没输内容时，JS 读取 input.value 仍是空字符串 ""，不是 placeholder 文本；提交表单时它也不会被发送。
立即学习“前端免费学习笔记（深入）”；
想预填内容，必须用：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
value="默认文本"（非受控组件） - React 中用
defaultValue（首次渲染）或value+onChange（受控组件） -
textarea用textContent或内联文本设置初始内容，不是placeholder
容易踩的坑：把 placeholder="必填" 当作 required 提示——用户清空输入框后提交，required 仍会报错，因为 placeholder 从不改变字段“是否为空”的判定逻辑。
::placeholder 样式怎么写才可靠
不能用普通 class 控制颜色或字体，必须用伪元素；现代写法是 ::placeholder，但旧版浏览器需补全前缀：
input::placeholder {
color: #666;
opacity: 1;
font-style: normal;
}
input::-webkit-input-placeholder { color: #666; }
input::-moz-placeholder { color: #666; }
input:-ms-input-placeholder { color: #666; }
关键细节：
-
opacity比color更稳妥，尤其深色主题下，某些浏览器对浅色color渲染异常 -
::placeholder不继承父级font-size，必须显式声明 - 移动端中文输入法下，placeholder 可能闪烁或延迟隐藏，这不是 bug，是浏览器对
input事件时机判断差异，别用它做状态判断依据
无障碍和可访问性为什么不能靠 placeholder
屏幕阅读器大多只在首次聚焦时读一次 placeholder，之后不再播报；它没有编程语义，无法被 aria-labelledby 关联，也不能替代 label。
合规做法：
- 每个
input必须配label（for属性或包裹写法） - 实在没空间放 visible label，至少加
aria-label="邮箱地址" - 别把重要提示（如“密码需含大小写字母”）只塞进 placeholder，用户一输入就看不见了
最常被忽略的是：placeholder 看得见，但对键盘导航或语音交互用户来说，它基本等于不存在。
