Jquery仿邮箱的登录、密码type=“password”输入框默认值

做一个如下图仿登录邮箱的小案例。当鼠标点击输入框时，里面默认的字自动消失。其中输入邮箱地址相对容易些。



1、css代码：

<style>

#txt1,#txt2{ color:#CCC; border:1px solid #666;}

#pswd{ display:none;border:1px solid #666;}

</style>

2、页面：

<form id="myform" action="#">

地址：<input type="text" id="txt1" value="请输入邮箱地址"/><br /><br />

密码：<input type="text" id="txt2" value="请输入邮箱密码"/>

<input type="password" id="pswd" /><br /><br />

<input type="button" id="btn"value="登陆" />

</form>

3、script代码：

<script src="jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

//邮箱地址输入框获取焦点

$('#txt1').focus(function(){

var txt1_value=$('#txt1').val();

if(txt1_value=="请输入邮箱地址"){

$(this).val('');

}

})

//邮箱地址输入框失去焦点

$('#txt1').blur(function(){

var txt1_value=$('#txt1').val();

if(txt1_value=="")

$(this).val('请输入邮箱地址');{

}

})

/*在做密码输入框时注意，因为type为密码，所以不可像地址输入框那样将密码的默认值设置为“请输入邮箱密码”，因为显现不出来。所以只能用文本输入框，而当时想到的第一种方法是在文本输入框获得焦点时，将文本输入框的属性改为password，那么输出来的就仍然是密码样式。如：$txt2_obj.attr("type","password");可是jquery中的这个方法是行不通的，会出现"type property can’t be changed"这个错误，不管是ff还是ie6浏览器。

第二种方法是：试图想通过replaceWith（html）代码来替代输入框，可是也行不通，因为id变换后就不大好弄。最后就用下面的方法来测试了。也看到网上有人说可通过改变背景图片来实现。这个就不多说了，大体上都差不多吧。记下这点点*/

var $txt2_obj=$('#txt2');//获取id为txt2的jquery对象

var $pswd_obj=$('#pswd');//获取id为txt2的jquery对象

$txt2_obj.focus(function(){

$pswd_obj.show().focus();//使密码输入框获取焦点

$txt2_obj.hide();//隐藏文本输入框

})

$pswd_obj.blur(function(){

if($pswd_obj.val()==''){//密码输入框失去焦点后，若输入框中没有输入字符时，则显现文本输入框

$txt2_obj.show();

$pswd_obj.hide();

}

})

});

</script>

/*总结：$txt2_obj.attr("type","password");不可改变type的属性。*/