placeholder兼容ie和password

最新推荐文章于 2020-11-24 18:34:26 发布

alice_dou

最新推荐文章于 2020-11-24 18:34:26 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/alice_dou/article/details/73844824

本文介绍了一种兼容不支持placeholder属性的老浏览器的方法。通过JavaScript检测浏览器是否支持该属性，并在不支持的情况下使用jQuery实现占位符效果，特别关注密码框的处理。

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

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

function placeholder(input){

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

//验证密码框
if(input.attr("type") == "password"){
if(input.val()!=""){
input.attr("type","password");
}else{
input.attr("type","text");
}

input.focus(function(){
input.attr("type","password");
}).blur(function(){
if(input.val() == ""){
input.attr("type","text");
}
});
}

if(input.val() == ""){
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");
}
});

//输入的字符不为灰色
input.keydown(function(){
$(this).removeClass("phcolor");
});
};

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

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

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


placeholder($(this));

});
}