坑爹的IE9-,真的是够够的了,不过公司不要求兼容这个玩意了,自己觉得兼容这个鬼还是挺有挑战性的,自己也碰到不少难题,一个个解决。
css:
.placeholderColor { color : #999; }
先判断浏览器类型(仅判断IE,如果需要请自行查找,线上很多):
function myBrowser(){
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
if (isIE) {
var IE5 = IE55 = IE6 = IE7 = IE8 = IE9 = IE10 = IE11=false;
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
IE55 = fIEVersion == 5.5;
IE6 = fIEVersion == 6.0;
IE7 = fIEVersion == 7.0;
IE8 = fIEVersion == 8.0;
IE9 = fIEVersion == 9.0;
IE10 = fIEVersion == 10.0;
IE11 = fIEVersion == 11.0; if (IE55) {
return "IE55";
}
if (IE6) {
return "IE6";
}
if (IE7) {
return "IE7";
}
if (IE8) {
return "IE8";
}
if (IE9) {
return "IE9";
}
}
}
下面是placeholder的修复函数:
function fix_ie_placeholder(){
$("[placeholder]").each(function(){
var el = $(this);
var placeholder = el.attr("placeholder");
if(el.prop("type")=="password")
{
el.focus(function ()
{
$(this).prop("type","password");
if($(this).val() == $(this).attr("placeholder"))
{
$(this).val('').removeClass("placeholderColor");
}
}).blur(function ()
{
if($(this).val()=='')
{
$(this).prop("type","text");
$(this).val($(this).attr("placeholder")).addClass("placeholderColor");
}
}).blur(); if(el.val()==''||el.val()==el.attr("placeholder"))
{
el.rop("type","text");
el.val($(this).attr("placeholder")).addClass("placeholderColor");
}
}
else
{
el.focus(function ()
{
if($(this).val() == $(this).attr("placeholder"))
{
$(this).val('').removeClass("placeholderColor");
}
}).blur(function ()
{
if($(this).val()=='')
{
$(this).val($(this).attr("placeholder")).addClass("placeholderColor");
}
}); if(el.val()==''||el.val()==el.attr("placeholder"))
{
el.val($(this).attr("placeholder")).addClass("placeholderColor");
}
}
});
};
如果为IE9,则执行placeholder修复函数:
if(myBrowser() == "IE9"){
fix_ie_placeholder();
}
OK,试一下吧,应该好用,我自己测试IE9没问题。Happy New Year!