老浏览器（如IE9及以下）不支持placeholder属性，需用JS模拟；判断支持与否应实测DOM能力：'placeholder' in document.createElement('input')；推荐用绝对定位label/span覆盖，不修改input的value和type。
不支持 placeholder 的老浏览器（比如 IE9 及以下）会直接忽略该属性，导致提示文字完全不显示——这不是“样式问题”，而是功能缺失，必须用 JS 模拟。
怎么判断浏览器是否支持 placeholder
不能靠 UA 字符串或 IE 版本号硬编码，要实测 DOM 能力：
-
'placeholder' in document.createElement('input')是最可靠的方式，返回true表示原生支持 - 注意：IE10+ 开始支持，但行为有差异——点击即隐藏；而 Chrome/Firefox 是键盘输入才隐藏，这点不影响兼容逻辑，但影响交互预期
- 别用
typeof input.placeholder !== 'undefined'，IE8 下会报错（input对象没这个属性，访问会 throw）
为什么不用 value + 样式模拟（常见错误做法）
把 placeholder 值塞进 value、再用 CSS 控制颜色，看似简单，实际埋雷：
-
<input type="password">会把提示文字也变成 ●●●，完全不可读 - 表单提交时，如果用户没输内容，后端收到的是 placeholder 文本而非空字符串，校验逻辑全乱
- focus/blur 事件里反复操作
value，容易和用户手动输入冲突（比如用户删到只剩一个字符又失焦，提示又冒出来） - 无法响应
input事件的实时变化（如粘贴、自动填充），提示状态不同步
推荐方案：绝对定位 label 或 span 覆盖
核心是「不碰 input 的 value 和 type」，只加一层视觉层：
立即学习“前端免费学习笔记（深入）”；
- 为每个带
placeholder属性的<input>或<textarea>动态创建一个<label>或<span> - 父容器必须设
position: relative（否则绝对定位会相对于 body 偏移） - label 的
for属性绑定 input 的id，确保点击提示也能聚焦输入框 - 监听
input和propertychange（IE）事件，而不是只靠focus/blur—— 这样才能捕获粘贴、拖入、自动填充等所有值变更 - CSS 上用
pointer-events: none让 label 不阻挡 input 的鼠标事件（IE10+ 支持，IE9- 可用z-index配合透明度规避）
密码框和动态表单的特殊处理
这是最容易被忽略的两个点：
-
<input type="password">必须走覆盖方案，绝不能动value；且 label 的字体颜色、大小需严格继承 input 的 computed style，否则在缩放或自定义字体下错位 - 通过 JS 动态插入的 input（如 Vue/React 渲染、AJAX 加载的表单），需要在节点插入后重新运行 placeholder 初始化逻辑，不能只依赖 DOMReady 一次性执行
- 如果页面用了 CSS transform 缩放（如移动端 rem 方案），label 的定位需用
getBoundingClientRect()实时计算，不能只靠 offsetLeft/offsetTop
