ie9及更早版本原生不支持placeholder属性,需用'placeholder' in document.createelement('input')特性检测,不支持时用原生js模拟,注意password类型安全处理。

placeholder 属性在 IE9 及更早版本中完全无效,包括 <input> 和 <textarea></textarea> 标签。这不是兼容性“差”的问题,而是原生不支持——浏览器解析时直接忽略该属性。
如何快速判断当前浏览器是否支持 placeholder
别依赖 UA 字符串或版本号,用特性检测最可靠:
if (!('placeholder' in document.createElement('input'))) {
// IE9、IE8、IE7 等老浏览器走这里
}
这个判断比检查 navigator.userAgent 更准,也避免误判 Edge Legacy 或某些国产双内核浏览器。
- 返回
false表示不支持,需手动模拟 - 注意:IE10+、Chrome 4+、Firefox 4+、Safari 5+、Opera 11.6+ 均返回
true - 该检测对
<textarea></textarea>同样有效,无需单独测
IE9 下模拟 placeholder 的最小可行方案
不用引入整个 jQuery 或复杂 polyfill,几行原生 JS 就能覆盖核心行为:
if (!('placeholder' in document.createElement('input'))) {
document.querySelectorAll('input[placeholder], textarea[placeholder]').forEach(el => {
const ph = el.getAttribute('placeholder');
el.setAttribute('data-placeholder', ph);
el.placeholder = ''; // 清掉无效属性,避免干扰
const onInput = () => {
if (el.value === ph) el.value = '';
el.classList.toggle('has-value', el.value !== '');
};
const onBlur = () => {
if (!el.value) {
el.value = ph;
el.classList.remove('has-value');
}
};
el.addEventListener('focus', onInput);
el.addEventListener('blur', onBlur);
el.addEventListener('input', onInput);
onBlur(); // 初始化状态
});
}
关键点:
- 只对带
placeholder属性的元素生效,不影响其他输入框 - 用
data-placeholder保留原始值,避免被表单序列化误读 - 监听
input而非keyup,兼容粘贴、拖入等操作 - 初始调用
onBlur()确保页面加载后提示文字就位
::placeholder 伪元素在 IE9 下不能用
CSS 自定义占位符样式(如颜色、字体)的 ::placeholder 伪类,IE9 完全不识别。连带的厂商前缀 ::-webkit-input-placeholder 和 ::-ms-input-placeholder 在 IE9 中也无效。
如果你用了类似下面的样式:
input::placeholder { color: #999; }
它在 IE9 中会被直接忽略,不会报错,但也不会生效。此时只能退回到 JS 模拟阶段的 class 控制,比如:
input[data-placeholder] { color: #999; }
input.has-value { color: #333; }
这样至少能保证视觉上统一灰字提示 + 黑字输入的区分逻辑。
真正麻烦的不是加几行 JS,而是当表单里混用 type="password" 时:不能直接把 placeholder 文字设成 value,否则会暴露明文。这类边界情况容易被漏掉,得单独处理 type 判断和 DOM 替换逻辑。











