placeholder仅对input（text、search、tel、url、email、password、number）和textarea有效；不支持date、select、div等元素，不可替代label或value，样式须用::placeholder等伪元素控制。

哪些 input 类型支持 placeholder

只对 <input>（type 为 text、search、tel、url、email、password、number）和 <textarea></textarea> 有效；其他一律不生效。

常见误用包括：

• <input type="date">：Chrome 等浏览器通常忽略 placeholder，别指望它显示“请选择日期”
• <input type="number">：部分旧版 Safari / Firefox 不渲染，或只在空值时短暂闪现
• <select></select>、<div>、自定义组件：加了 <code>placeholder 属性也纯属无效字符串，DOM 中可见但无任何行为

  placeholder 不是 value，也不能替代 label

  placeholder 是视觉提示，用户一输入就消失，且不参与表单提交——它和 value 完全无关。

  典型错误写法：<input placeholder="张三">，结果用户点进去就清空，反而破坏初始引导。

  正确做法应分清职责：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 用 value 设默认值（如搜索框预填“最近一周”），它会随表单一起提交
  • 用 <label for="xxx"></label> 或 aria-label 做可访问性标识，屏幕阅读器不读 placeholder
  • 必填说明、格式要求（如“6–20位字母数字”）必须放在 label 里，不能只塞进 placeholder

  修改 placeholder 样式必须用伪元素，且前缀要写全

  直接在 input 上设 color 或 font-size 对 placeholder 无效。必须用 CSS 伪元素控制，且不同内核需显式声明：

  input::placeholder {
    color: #999;
    font-size: 14px;
    opacity: 1;
  }
  input::-webkit-input-placeholder { color: #999; }
  input::-moz-placeholder { color: #999; opacity: 1; }
  input:-ms-input-placeholder { color: #999; }

  注意点：

  • Firefox 默认让 placeholder 半透明，其他浏览器不透明，统一加 opacity: 1 避免不一致
  • 父级设了 font-family，::placeholder 里得重写，否则可能回退到等宽字体
  • 禁用 transition 或 display: none 动画，部分浏览器不支持且易导致闪烁

  JavaScript 动态设置 placeholder 的边界在哪

  JS 可以安全读写 el.placeholder，但它不触发任何事件，也不响应状态变化。

  例如：

  • el.placeholder = "新提示" 立即生效，但不会触发 input 或 change 事件
  • 在 React/Vue 中，不要用 placeholder 控制错误提示逻辑（比如“邮箱格式错误时显示红色 placeholder”）——它只看 value 是否为空，不感知校验状态
  • 框架中若依赖 placeholder 显隐做 UI 反馈，大概率会掉坑：用户输入后清空再聚焦，提示就没了，且无法还原

  真正需要动态提示的场景，应该用独立的 <span class="error"></span> 或 title 属性配合 setCustomValidity()。