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

通过

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

可以解决autocomplete="off" 的自动显示密码导致的问题.

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

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>

/*

不可改变type的属性。*/