<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
PlaceHolder
</title>
<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
</head>
<body>
<input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery<br/>
<br/>
账号：<input type="text" name="email" placeholder = '用户账号' /><br/>
<br/>
密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>
</body>
</html>
<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>
<script>
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
}
if(!isPlaceholder()){ //不支持placeholder 用jquery来完成
$("input").not("input[type='password']").each(function(){//把input绑定事件 排除password框
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
</script>
