jQuery密码框提示文本源码实例

为了让表单输入更加人性化，一般都会设有提示内容，比如在文本框内容默认有“请输入姓名”类似的提示，但是在密码框中实现起来就没有那么轻松了，因为密码框中的内容并不是明文显示的，下面就介绍一下如何实现提示效果。
代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>密码框提示语-51前端</title>
<style type="text/css">
ul{list-style:none}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".text_login").focus(function(){ 
    if($(this).val()=='输入姓名'||$(this).val()=='输入密码'){ 
      $(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('输入密码'); 
    } 
    else if($(this).attr('id')=='uname'&&$(this).val()==''){ 
      $(this).val('输入姓名'); 
    } 
  }); 
}); 
</script> 
</head>
<body> 
<ul class="tb_login">
  <li>姓名:
   <input type="text" value="输入姓名" id="uname" class="text_login"/>
  </li>
  <li>密码:
   <input type="password" id="password2" style="display:none;" class="text_login"/>
   <input type="text" value="输入密码" id="password1" class="text_login"/>
  </li>
</ul>
</body> 
</html>

代码描述：jQuery密码框提示文本。jQuery密码框提示文本源码实例

下载全部收藏

111 148

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册