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

156 阅读 0 评论 103 点赞

我是靠谱客的博主鲤鱼心锁，最近开发中收集的这篇文章主要介绍密码框显示提示文字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> 