jquery实现input password 提示信息兼容ie

青旅半醒 2022-07-21 05:58 155阅读 0赞

<!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"/>
    <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>

复制代码即可实现效果！