placeholder兼容IE8解决方案

Posted 芜明-追星

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了placeholder兼容IE8解决方案相关的知识，希望对你有一定的参考价值。

1、原因：placeholder是h5的新属性，IE10以前的浏览器(8、9)不支持此属性。

 

2、解决方法：jQuery三方插件  jquery-placeholder

 

3、快速开始：

 

[html] view plain copy
 
 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test</title>  
  5.     <script type="text/javascript" src="jquery-1.9.1.js"></script>  
  6.     <!--[if lte IE 9]>  
  7.      <script src="../../js/jquery/jquery.placeholder.min.js"></script>  
  8.      <script>  
  9.         $(function(){  
  10.             $(‘input[placeholder]‘).placeholder();  
  11.         });  
  12.      </script>  
  13.     <![endif]-->  
  14. </head>  
  15. <style type="text/css">  
  16.     input{  
  17.         width: 100px;  
  18.         height: 50px;  
  19.         border: 1px solid red;  
  20.     }  
  21.     .placeholder {  
  22.         color: #ccc;  
  23.     }  
  24. </style>  
  25. <body>  
  26. <input type="text" placeholder="dfdsfdsfad"/>  
  27. </body>  
  28. </html>  

 

4、注：此插件和jquery validate混合使用时，密码框password会略过校验，因为新生成的input并没有name属性。解决方法：点击提交按钮时，用js代码给新生成的input添加name属性

以上是关于placeholder兼容IE8解决方案的主要内容，如果未能解决你的问题，请参考以下文章

ie8兼容问题

js解决IE89下placeholder的兼容问题

IE8兼容placeholder

input 的 placeholder属性在IE8下的兼容处理

兼容IE8 input的placeholder的文字显示

IE8 不支持html5 placeholder的解决方案