jquery 登录时用户名和密码提示点击时消失

xmliu

做一个简单的登录页面，要求是默认状态下，用户名和密码框有提示输入内容，当点击时，文字被清空。

对于密码框来说，默认状态时"请输入密码"，当点击输入框时，内容消失，此时可以输入密码，要求密码type=“password”，即输入密码为隐藏内容。解决方法是设置两个输入框，一个type=“text”，一个为type=“password”，通过调用不同输入框来达到效果。


<script type="text/javascript" src="${staticWebsite}js/jquery-1.8.0.js"></script>
<script>
$(function(){
//对用户名框进行操作
$("#userName").focus(function(){   //用户名框获得鼠标焦点
var txt_value = $(this).val();     //得到当前文本框的值
if(txt_value==this.defaultValue) {        
$(this).val("");              //如果符合条件，则清空文本框内容
}
$(this).addClass("focus");
});

$("#userName").blur(function(){  //用户名框失去鼠标焦点
var txt_value = $(this).val();   //得到当前文本框的值
if(txt_value=="") {
$(this).val(this.defaultValue);     //如果符合条件，则设置内容
}
$(this).removeClass("focus");
})
//对密码框进行操作
var $pwd_text=$("#pwd_text");
var $password=$("#password");
$password.hide();
$pwd_text.focus(function(){
if($pwd_text.val()=="请输入密码")
$pwd_text.remove();
$password.show().focus();
//$pwd_text.hide();
$password.show();

}
$($password).addClass("focus");
});
$password.blur(function(){
if($password.val()==""){
$password.hide();
$pwd_text.show();
}
$(this).removeClass("focus");
});
});
</script>


jsp页面部分代码如下：
<input type="text" id="userName" name="userName" size="20" value="请输入用户名">
<input type="text" id="pwd_text" name="password" size="20" value="请输入密码">
<input type="password" id="password" name="password" size="20" value="">
<input type="submit" id="button" name="button" value="登录">