<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>让ie也兼容placeholder</title>
<style>
input::-moz-placeholder{ color:#00f;}
::-webkit-input-placeholder{ color:#00f;}
</style>
<script src="../../js/jquery-1.7.2.js"></script>
<script>
$(function(){
function placeHolder(wrapDom){
var support='placeholder' in document.createElement('input');
if(!support){
var $pass=$("input[type=password]"),
passL=$pass.length;
if(passL){
$pass.hide().parent().append("<input type='text' value='请输入密码' class='pwdtext'/>");
$(".pwdtext").focus(function(){
$(this).hide().prev("input").show().focus();
})
}
wrapDom.find('[placeholder]').focus(function() {
var input = $(this);
if(input.val() == input.attr('placeholder')) {
input.val('');
}
}).blur(function() {
var input = $(this);
if(/^password/.test(input.attr("id"))){
if(!input.val()) {
input.hide().next("input").show();
}
}
if(input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
}).blur();
};
}
placeHolder($("#test"));
})
</script>
</head>
<body>
<form action="" method="post" id="test">
<input type="text" name="username" id="username" placeholder="用户名" />
<input type="password" name="password" id="password" placeholder="密码"/>
</form>
</body>
</html>