今天写了一个表单元素，在用户点击的时候会清空input中的内容，当鼠标点击其他地方的时候会把输入的值保存为input的value值

类似于这样的效果

当用户点击的时候文字消失。

html代码

 

[html]

1. <input type="text" name="" value="请输入您的邮箱地址"/>  
2. <input type="text" name="" value="请输入用户名"/>  
3. <input class="pwd" type="text" name="" value="请输入密码"/>  
4. <input class="pwd" type="text" name="" value="确认密码"/>  

jq代码

[html]

1. <script type="text/javascript">  
2.     $(document).ready(function(e) {  
3.         var temp;  
4.         $(":text").focusin(function(){  
5.             var value = $(this).val();  
6.             if ($(this).val() == "请输入密码" || $(this).val() == "请输入您的邮箱地址" || $(this).val() == "确认密码" || $(this).val() =="请输入用户名") {                
7.                 if($(this).val() == "确认密码" || $(this).val() == "请输入密码") {  
8.                     $(this).attr('type','password')  
9.                 }  
10.                 $(this).val("")  
11.             }  
12.             //alert(value)  
13.         })  
14.         $(":input").focusout(function(event) {  
15.             /* Act on the event */  
16.             if($(this).val() == "") {                
17.                 if ($(this).hasClass('pwd')) {  
18.                     $(this).attr('type','text')  
19.                 };  
20.                 $(this).val(temp)  
21.             }  
22.         });  
23.     })  
24.   
25. </script>  

 

这样之后基本所要求的功能可以实现，但是发现代码不够优雅，于是又想到了可以使用数组来保存value值，

 

[javascript]

1. var arr_ = [];  
2.         var temp;  
3.         $(":text").each(function() {  
4.             arr_.push($(this).val())  
5.         })  
6.         $(":text").focusin(function(){  
7.             var that = this;  
8.             var value = $(that).val();  
9.             temp = value;  
10.             $.each(arr_,function(i,n) {  
11.                 if(value==n){  
12.                     $(that).val("");  
13.                     if(value=="请输入密码"||value=="确认密码"){  
14.                         $(that).attr("type","password");  
15.                     }  
16.                 }  
17.             });  
18.         })  

又发现了一个问题， 总是需要一个全局变量temp来保存value值，这对于javascript来说是不好的，于是乎又想到了data属性

 

 

[html]

1. <input type="text" name="" data="请输入您的邮箱地址" value="请输入您的邮箱地址"/>  
2.             <input type="text" name="" data="请输入用户名" value="请输入用户名"/>  
3.             <input class="pwd" type="text" data="请输入密码" name="" value="请输入密码"/>  
4.             <input class="pwd" type="text" data="确认密码" name="" value="确认密码"/>  

 

[javascript]

1. $(document).ready(function(e) {  
2.         var arr_ = [];  
3.         $(":text").each(function() {  
4.             arr_.push($(this).val())  
5.         })  
6.         $(":text").focusin(function(){  
7.             var that = this;  
8.             var value = $(that).val();  
9.             $.each(arr_,function(i,n) {  
10.                 if(value==n){  
11.                     $(that).val("");  
12.                     if(value=="请输入密码"||value=="确认密码"){  
13.                         $(that).attr("type","password");  
14.                     }  
15.                 }  
16.             });  
17.         })  
18.         $(":input").focusout(function(event) {  
19.             /* Act on the event */  
20.             if($(this).val() == "") {                
21.                 if ($(this).hasClass('pwd')) {  
22.                     $(this).attr('type','text')  
23.                 };  
24.                 $(this).val($(this).attr("data"));  
25.             }  
26.         });  
27.     })  

这样便看起来舒服多了。