jquery实现密码框提示文字的功能。
代码:
1 <html>
2 <head>
3 <title>登录-jquery实现密码框显示文字-www.jbxue.com</title>
4 <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $(".text_login").focus(function(){
8 if($(this).val()=='user name' || $(this).val()=='password'){
9 $(this).val('');
10 }
11 if($(this).attr('id')=='password1'){
12 $(this).hide();
13 $('#password2').show();
14 $('#password2').focus();
15 }
16 });
17 $(".text_login").blur(function(){
18 if($(this).attr('id')=='password2' && $(this).val()==''){
19 $(this).hide();
20 $('#password1').show();
21 $('#password1').val('password');
22 }
23 else if($(this).attr('id')=='uname' && $(this).val()=='' ){
24 $(this).val('user name');
25 }
26 });
27 });
28 </script>
29 </head>
30
31 <body>
32 <table cellpadding="0" cellspacing="0" class="tb_login" border="0">
33 <tr>
34 <td> 账号：</td>
35 <td>
36 <input type="text" name="uname" value="user name" id="uname" class="text_login"/>
37 </td>
38 </tr>
39 <tr>
40 <td> 密码：</td>
41 <td>
42 <input type="text" value="password" id="password1" class="text_login"/>
43 <input type="password" id="password2" style="display:none;" class="text_login"/>
44 </td>
45 </tr>
46 </table>
47 </body>
48 </html>
2 <head>
3 <title>登录-jquery实现密码框显示文字-www.jbxue.com</title>
4 <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
5 <script>
6 $(document).ready(function(){
7 $(".text_login").focus(function(){
8 if($(this).val()=='user name' || $(this).val()=='password'){
9 $(this).val('');
10 }
11 if($(this).attr('id')=='password1'){
12 $(this).hide();
13 $('#password2').show();
14 $('#password2').focus();
15 }
16 });
17 $(".text_login").blur(function(){
18 if($(this).attr('id')=='password2' && $(this).val()==''){
19 $(this).hide();
20 $('#password1').show();
21 $('#password1').val('password');
22 }
23 else if($(this).attr('id')=='uname' && $(this).val()=='' ){
24 $(this).val('user name');
25 }
26 });
27 });
28 </script>
29 </head>
30
31 <body>
32 <table cellpadding="0" cellspacing="0" class="tb_login" border="0">
33 <tr>
34 <td> 账号：</td>
35 <td>
36 <input type="text" name="uname" value="user name" id="uname" class="text_login"/>
37 </td>
38 </tr>
39 <tr>
40 <td> 密码：</td>
41 <td>
42 <input type="text" value="password" id="password1" class="text_login"/>
43 <input type="password" id="password2" style="display:none;" class="text_login"/>
44 </td>
45 </tr>
46 </table>
47 </body>
48 </html>