登录事件，鼠标点击输入框隐藏默认值事件

原文链接： http://www.cnblogs.com/q460021417/p/4353554.html

CSS：

1 <style>
2     #txt1,#txt2{ color:#CCC; border:1px solid #666;}
3     #pswd{ display:none;border:1px solid #666;}
4 </style>        

引用JS库:

1 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

HTML:

 1 <form id="myform" action="#">
 2     地址：
 3     <input type="text" id="txt1" value="请输入邮箱地址" />
 4 
 5     <br />
 6     <br /> 密码：
 7     <input type="text" id="txt2" value="请输入邮箱密码" />
 8     <input type="password" id="pswd" />
 9 
10     <br />
11     <br />
12     <input type="button" id="btn" value="登陆" />
13 </form>

JS代码：

 1 <script type="text/javascript" charset="utf-8">
 2 dlsj('#txt1','请输入邮箱地址','#txt2','#pswd')   //调用
 3 
 4 
 5 function dlsj (txt1,txt1_val,txt2,password) {
 6     //邮箱地址输入框获取焦点
 7         $(txt1).focus(function(){
 8         var txt1_value=$(txt1).val();
 9         if(txt1_value==txt1_val){
10         $(this).val('');
11         }
12     })
13 
14 //邮箱地址输入框失去焦点
15     $(txt1).blur(function(){
16         var txt1_value=$(txt1).val();
17         if(txt1_value=="")
18         $(this).val(txt1_val);{
19         }
20     })
21     var $txt2_obj=$(txt2);//获取id为txt2的jquery对象
22     var $pswd_obj=$(password);//获取id为txt2的jquery对象
23     $txt2_obj.focus(function(){
24         $pswd_obj.show().focus();//使密码输入框获取焦点
25         $txt2_obj.hide();//隐藏文本输入框
26 
27    })
28     $pswd_obj.blur(function(){
29          if($pswd_obj.val()==''){//密码输入框失去焦点后，若输入框中没有输入字符时，则显现文本输入框
30          $txt2_obj.show();
31          $pswd_obj.hide();
32          }
33     
34     })
35 }    
36 </script>

转载于:https://www.cnblogs.com/q460021417/p/4353554.html