兼容IE的placeholder

最新推荐文章于 2018-09-12 10:10:22 发布

hwt_211

最新推荐文章于 2018-09-12 10:10:22 发布

阅读量652

点赞数

分类专栏：杂谈

本文链接：https://blog.csdn.net/hwt_211/article/details/41247325

版权

杂谈专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个jQuery插件，该插件用于在不支持placeholder属性的浏览器中提供兼容性的解决方案。通过简单的JS和CSS代码，实现了输入框提示文字的效果，并确保了跨浏览器的一致体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function() {
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
};
});

function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}

######css#####
.placeholder{color:#666;}

<input type="text" class="placeholder" placeholder="版内搜索" />