Html5/Css3 向下兼容placeholder

Css3下input標籤的placeholder屬性在IE10如下是不兼容的，頁面加入這段JS腳本後，可以兼容IE6+

 

 1 //@charset "utf-8";
 2 /**
 3  * jquery版本要求：1.3 ~ 1.8，HTML聲明請遵循W3C標準
 4  * 用來處理placeholder的插件
 5  * 兼容IE6瀏覽器
 6  * @author liuzhao141596@163.com
 7  * @version 1.0
 8  * @date 2014-2-24
 9  */
10 $(function($) {
11     //判斷瀏覽器是否支持 placeholder屬性
12     function isPlaceholder() {
13         var input = document.createElement('input');
14         return 'placeholder' in input;
15     }
16 
17     function changeToOriginalColor(self) {
18         var index = $(self).index();
19         var color = originalColor[$(self).index()];
20         $(self).css('color', color);
21     }
22 
23     if(!isPlaceholder()) {
24         var texts = $(':text');
25         var len = texts.length;
26         var originalColor = [];
27         for(var i = 0; i < len; i++) {
28             var self = texts[i];
29             var placeholder = $(self).attr('placeholder');
30             if($(self).val() == "" && placeholder != null) {
31                 $(self).val(placeholder);
32                 originalColor[i] = $(self).css('color');
33                 $(self).css('color', '#666');
34             }
35         }
36         texts.focus(function() {
37             if($(this).attr('placeholder') != null && $(this).val() == $(this).attr('placeholder')) {
38                 $(this).val('');
39                 changeToOriginalColor(this);
40             }
41         }).blur(function() {
42             if($(this).attr('placeholder') != null && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
43                 $(this).val($(this).attr('placeholder'));
44                 $(this).css('color', '#666');
45             }
46         });
47     }
48 });

 

效果是這樣的初始狀態  

文本框有文字輸入

使用方法：

頁面引用這段腳本就能夠向下兼容placeholder  的屬性，不過注意的是密碼框的狀況不適合！！