ie8浏览器不支持placeholder属性

最新推荐文章于 2019-10-22 17:48:13 发布

沈荣荣

最新推荐文章于 2019-10-22 17:48:13 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010251897/article/details/46642279

本文介绍了一种使用jQuery实现的兼容旧版浏览器的placeholder文本框提示效果的方法。该方法通过判断浏览器是否支持placeholder属性来决定是否应用自定义的占位符逻辑。对于不支持此属性的老版本浏览器，如IE8及以下版本，文章提供了一种解决方案，确保了输入框即使在这些浏览器中也能正常显示提示信息。

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

$(function(){

//判断浏览器是否支持placeholder属性
supportPlaceholder='placeholder'in document.createElement('input'),

placeholder=function(input){

var text = input.attr('placeholder'),
defaultValue = input.defaultValue;

if(!defaultValue){

input.val(text).addClass("phcolor");
}

input.focus(function(){

if(input.val() == text){

$(this).val("");
}
});

input.blur(function(){

if(input.val() == ""){

$(this).val(text).addClass("phcolor");
}
});

};

//当浏览器不支持placeholder属性时，调用placeholder函数
if(!supportPlaceholder){

$('input').each(function(){

text = $(this).attr("placeholder");

if($(this).attr("type") == "text"){

placeholder($(this));
}
if($(this).attr("type") == "password"){

placeholder($(this));
}
});
}

});