天天看點

jquery實作input password 提示資訊相容ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){ 
	$("#pwd").blur(function(){  	
		if($(this).val()==""){ 
		   $(this).val("請輸入密碼");  
		if($(this).attr("type") == "password"){ 
		   $(this).hide();	
		   $('#pwd_txt').show();		   
		   $('#pwd_txt').val("請輸入密碼");  		
		}else{  
		   var pass = $('#pwd_txt').val();  
			if(pass.length<1){  
			   $(this).hide();  
			   $('#pwd_txt').show();
			 }  
		   }  		   
		 }  
	});  
	$("#pwd_txt").focus(function(){  
		if($(this).val()=="請輸入密碼"){ 		  
		   $(this).val(""); 
		if($(this).attr("type")=="text"){  
			$(this).hide();  
			$('#pwd').show(); 			
			$('#pwd').val(""); 			
			$('#pwd').focus();//加上 
			
		}else{  
			var pass = $('#pwd').val();
			if(pass.length<1){  
			  $(this).hide();  
			  $('#pwd_txt').show();  	  
			 }  
		   } 		   
		 }  
	})  
});  
</script> 
</head>  
<body>  
	密碼:
    <input type="password" class="pwd hover" id="pwd" style="display:none;"/>  
    <input type="text" value="請輸入密碼" class="pwd" id="pwd_txt"/>  
</body>  
</html> 
           

複制代碼即可實作效果!

繼續閱讀