IE占位符属性的兼容性问题解决方案

HTML 5有一个很棒的属性,占位符,但它不支持HTML5的低版本浏览器。因此,有必要人工实现占位符属性。下面举个例子。有兴趣的朋友可以参考一下。




HTML 5有一个很好的属性,占位符,当鼠标集中在它上时,提示就会消失,当焦点丢失时,它会再次出现。

但在不支持HTML5的低版本浏览器中,占位符属性无效。为了解决这个问题,占位符是人工实现的。

复制代码代码如下所示:
占位符函数实现
变量占位符{ {
添加:函数(EL){
如果(!('placeholder'in document.createelement(输入的))){
var =占位符;
el.each(function(e){)
如果(IsEmpty((e.value))| |(e.value)= e.attr('placeholder ')){
E.value(e.attr('placeholder '));
E.css(色彩,'gray);
}
{其他
E.css(色彩,);
}
});
El.bind('focus',自我。_onfocus);
El.bind(听到咔哒声,自我。_onfocus);
El.bind('blur,自我。_onblur);
El.bind('keyup,自我。_onkeyup);
}
},
删除:函数(EL){
如果(!('placeholder'in document.createelement(输入的))){
var =占位符;
El.unbind('focus',自我。_onfocus);
El.unbind(听到咔哒声,自我。_onfocus);
El.unbind('blur,自我。_onblur);
}
},
检查:函数(EL){
如果(!('placeholder'in document.createelement(输入的))){
el.each(功能(焦油){)
如果(IsEmpty(tar.value())){
Tar.value(tar.attr('placeholder '));
}
});
}
},
清除:函数(){
如果(!('placeholder'in document.createelement(输入的))){
($输入{类型=文本,每个)(功能(EL){
如果(EL值)= el.attr(('placeholder ')){
el.value(' ');
}
});
$('textarea)。每个(功能(EL){
如果(EL值)= el.attr(('placeholder ')){
el.value(' ');
}
});
}
},
_onfocus:(功能){
如果(美元值)(这)(= $(this)。Attr('placeholder '))
$(。);
},
_onblur:(功能){
如果(IsEmpty(美元值)(这)(| |)(这)(美元值)= $(这)。Attr('placeholder ')){
$(这)。价值($(this)。Attr('placeholder '));
$(这)。Css(色彩,'gray);
}
{其他
$(这)。Css(色彩,);
}
},
_onkeyup:(功能){
如果(IsEmpty($(this)。值())){
$(这)。Css(色彩,'gray);
}
{其他
$(这)。Css(色彩,);
}
}
};

使用时间:

复制代码代码如下所示:
placeholder.add($(文本输入{类型=));
placeholder.add($('textarea '));

值得注意的是占位符显示了…如果输入的类型是密码。

在这种情况下,解决方案是:

给定两个输入框,

一个是文本,一个是密码,

当有焦点时,切换到密码,当焦点丢失时,切换到文本以显示占位符属性。

复制代码代码如下所示:


$(函数(){())
var pwd =美元(# PWD);
密码= $(var#密码);
Pwd.focus(function(){()
Pwd.hide();
Password.show(),关注();
});
Password.focusout(function(){()
如果(密码)())
Password.hide();
Pwd.show();
}
});
});