密码框显示提示文字jquery示例

复制代码 代码如下:

  <html>

  <head>

  <title>登录</title>

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

  <script>

  $(document).ready(function(){

  $(".text_login").focus(function(){

  if($(this).val()=='user name' || $(this).val()=='password'){

  $(this).val('');

  }

  if($(this).attr('id')=='password1'){

  $(this).hide();

  $('#password2').show();

  $('#password2').focus();

  }

  });

  $(".text_login").blur(function(){

  if($(this).attr('id')=='password2' && $(this).val()==''){

  $(this).hide();

  $('#password1').show();

  $('#password1').val('password');

  }

  else if($(this).attr('id')=='uname' && $(this).val()=='' ){

  $(this).val('user name');

  }

  });

  });

  </script>

  </head>

  <body>

  <table cellpadding="0" cellspacing="0" class="tb_login" border="0">

  <tr>

  <td> 账号:</td>

  <td>

  <input type="text" name="uname" value="user name" id="uname" class="text_login"/>

  </td>

  </tr>

  <tr>

  <td> 密码:</td>

  <td>

  <input type="text" value="password" id="password1" class="text_login"/>

  <input type="password" id="password2" style="display:none;" class="text_login"/>

  </td>

  </tr>

  </table>

  </body>

  </html>