jquery 实现 html5 placeholder 兼容password密码框

来源：http://myfreespace.iteye.com/blog/1659450

在做登录的时候我们都会用到文本框中显示要输入的默认提示，以前都是用js判断的比较麻烦，还有一个就是password是通过两个input框切换实现的，还好html5提供了一个属性placeholder，在input类型的框上可以起到占位符的效果，但现在还不是所有的浏览器都支持很html5，下面就通过jquery、html5来实现可以兼容多种浏览器的placeholder效果。
大致思路：
	1.判断浏览器是否支持html5的placeholder，支持就直接使用该属性。
	2.不支持就通过jquery来添加blur focus事件
	3.对password框的特使处理
运行前要引入jquery类库，
Js代码  收藏代码
  1. <style type="text/css">  
  2. /* 设置提示文字颜色 */  
  3. ::-webkit-input-placeholder {  
  4. color: #838383;  
  5. }  
  6. :-moz-placeholder {  
  7. color: #838383;  
  8. }  
  9. .placeholder {  
  10. color: #ccc;  
  11. }  
  12. </style>  
  13. 登录用户名、密码文字提示，鼠标离开显示文字 html5 and jquery<br/>  
  14. <br/>  
  15. 账号：<input type="text" name="email" placeholder = '用户账号' /><br/>  
  16. <br/>  
  17. 密码：<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/>  
  18. <script type="text/javascript">  
  19. //判断浏览器是否支持 placeholder属性  
  20. function isPlaceholder(){  
  21.     var input = document.createElement('input');  
  22.     return 'placeholder' in input;  
  23. }  
  24.   
  25. if (!isPlaceholder()) {//不支持placeholder 用jquery来完成  
  26.     $(document).ready(function() {  
  27.         if(!isPlaceholder()){  
  28.             $("input").not("input[type='password']").each(//把input绑定事件 排除password框  
  29.                 function(){  
  30.                     if($(this).val()=="" && $(this).attr("placeholder")!=""){  
  31.                         $(this).val($(this).attr("placeholder"));  
  32.                         $(this).focus(function(){  
  33.                             if($(this).val()==$(this).attr("placeholder")) $(this).val("");  
  34.                         });  
  35.                         $(this).blur(function(){  
  36.                             if($(this).val()=="") $(this).val($(this).attr("placeholder"));  
  37.                         });  
  38.                     }  
  39.             });  
  40.             //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换  
  41.             var pwdField    = $("input[type=password]");  
  42.             var pwdVal      = pwdField.attr('placeholder');  
  43.             pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');  
  44.             var pwdPlaceholder = $('#pwdPlaceholder');  
  45.             pwdPlaceholder.show();  
  46.             pwdField.hide();  
  47.               
  48.             pwdPlaceholder.focus(function(){  
  49.                 pwdPlaceholder.hide();  
  50.                 pwdField.show();  
  51.                 pwdField.focus();  
  52.             });  
  53.               
  54.             pwdField.blur(function(){  
  55.                 if(pwdField.val() == '') {  
  56.                     pwdPlaceholder.show();  
  57.                     pwdField.hide();  
  58.                 }  
  59.             });  
  60.               
  61.         }  
  62.     });  
  63.       
  64. }  
  65. </script>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hasayaki/p/3025469.html