<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>jQuery实现IE浏览器兼容placeholder效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .input {
width: 200px;
height: 30px;
line-height: 30px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 20px auto;
display: block;
}
</style>
</head> <body>
<input type="text" placeholder="请输入姓名" class="input" />
<script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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");
}
}); //输入的字符不为灰色
input.keydown(function() { $(this).removeClass("phcolor");
});
}; //当浏览器不支持placeholder属性时，调用placeholder函数
if (!supportPlaceholder) { $('input').each(function() { text = $(this).attr("placeholder"); if ($(this).attr("type") == "text") { placeholder($(this));
}
});
} });
</script>
</body> </html>
效果图：