placeholder仅对text、search、tel、url、email、password、number和textarea有效，不支持date、checkbox、radio、file、select、hidden等；它不是默认值，不能替代label，也不参与提交，仅为空值时显示灰色提示。
placeholder 不是默认值，不能替代 label，也不参与提交；它只在空值时显示灰色提示，且仅对特定 input 类型和 textarea 有效。
哪些 input type 支持 placeholder
只有以下类型原生支持：text、search、tel、url、email、password、number 和 textarea。其他如 date、checkbox、radio、file、select、hidden 均不支持——加了也无效，浏览器直接忽略。
常见误用包括：
- 给
<select></select>写placeholder="请选择"→ 应改用一个disabled的空<option></option> - 在自定义组件或
<div> 上加 <code>placeholder属性 → 完全无渲染效果，也不是合法 HTML - 用
type="number"时发现 placeholder 不显示 → 某些旧版 Chrome/Safari 会忽略，建议降级为type="text"并配合inputmode="numeric"和前端校验 -
input::-webkit-input-placeholder（Chrome/Safari/Edge） -
input::-moz-placeholder（Firefox，注意默认opacity: 0.53，不设opacity: 1会发灰） -
input:-ms-input-placeholder（IE 10–11，已废弃但仍有存量） -
input::placeholder（现代标准，放最后，避免被前面规则覆盖） - React 中若
placeholder={text}的text初始为null或undefined，React 18 严格模式可能跳过 DOM 属性设置 → 改用placeholder={text ?? ""} - Vue 中若
:placeholder="computedText"的computedText未正确定义为computed，或依赖未触发更新 → 检查是否漏了watch或ref依赖追踪 - 统一原则：确保传入值始终是字符串类型，避免
null/undefined直接透传 - 调试时别只看 JS 变量，要打开 DevTools 查看真实 DOM 元素上是否存在
placeholder属性 -
input { font-size: 0; }或line-height: 0;→ placeholder 文字被压扁甚至消失 - 父容器宽度太小 + 未设
white-space: nowrap→ 中文 placeholder 在 iOS Safari 上可能自动缩放导致模糊 - 用了
appearance: none;却没补全各内核前缀 → 某些 Safari 版本下 placeholder 不渲染 -
input::placeholder { color: transparent; }忘记重置 → 提示变成“隐形”，用户根本看不到 - 表单重置后 placeholder 没恢复 → 实际是 JS 清空了
value，而 placeholder 本身只由 HTML 属性控制，不受form.reset()影响
为什么 placeholder 颜色/字体改不了
因为 ::placeholder 是伪元素，不是普通文本继承样式。直接写 input { color: #333 } 对它完全没用。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
必须显式声明各浏览器前缀，且顺序很重要：
另外：::placeholder 只支持 color、font-size、opacity、font-style 等文本类样式；padding、background、border 写了也静默忽略。
React/Vue 中 placeholder 动态更新失效
框架绑定本身没问题，但容易因初始值或响应链断裂导致残留或卡住：
placeholder 被截断、模糊或不显示的典型原因
这些不是 bug，而是 CSS 与浏览器渲染机制共同作用的结果：
真正难处理的是可访问性边界：屏幕阅读器通常不读 placeholder，且它一输入就消失，所以任何关键语义（比如字段用途、必填、格式要求）都必须落在 label 或 aria-label 里，而不是指望用户记住那行一闪而过的灰字。
