自從有了H5讓我們喜也讓我們憂，新特性用起來很炫、很酷提高了不少工作效率，但不得不考慮該死的IE瀏覽器（從此微軟的形象一落千丈）。

在H5中我們會使用placeholder屬性來實現文字水印提示資訊。

<input placeholder="智學無憂IT教育">

但是讓人尷尬的事情來了，IE不支援

怎麼辦了？

老曹寫了一個外掛供大家學習和參考，也歡迎大家提出問題和建議，不斷地完善該外掛！，外掛的檔名是《placeholderIE.js》

/**
 * 對IE10以下瀏覽器支援H5 placeholder屬性的外掛
 * 作者：曹領雄
 * 日期：2016-11-16
 * Version：v0.1
 * placeholderColor:佔位字型顏色
 * unPlaceholderColor：非佔位字型顏色
 */
(function (global, placeholderColor, unPlaceholderColor) {
    if (window.attachEvent) {//判斷是否支援IE瀏覽器
        //顏色處理
        global.placeholderColor = placeholderColor == undefined ? "#949494" : placeholderColor;
        global.unPlaceholderColor = unPlaceholderColor == undefined ? "#3C3F41" : unPlaceholderColor;
        //註冊載入事件
        window.attachEvent("onload", function () {
            var inputs = document.getElementsByTagName("input");
            //判斷文字框空白字元
            var reg = /^\s*$/;
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                var type = input.type.toLowerCase();
                //獲取屬性 placeholder的值
                var placeholder = input.getAttribute("placeholder");
                if (type == "text" && placeholder) {
                    input.value = placeholder;
                    input.style.color = global.placeholderColor;//預設字型顏色為灰色
                    (function (txt) {
                        //獲取焦點事件處理
                        input.onfocus = function () {
                            var val = this.value;
                            if (txt === val) {//相等則清空
                                this.value = "";
                            }
                        };
                        //失去焦點事件處理
                        input.onblur = function () {
                            var val = this.value;
                            if (reg.test(val)) {//為空白符號
                                this.value = txt;//用placeholder取代
                                input.style.color = global.placeholderColor;
                            }
                        };
                        //內容輸入事件處理
                        input.onkeyup = function () {
                            var val = this.value;
                            if (txt === val) {//相等則清空
                                if (input.style.color != global.placeholderColor)
                                    input.style.color = global.placeholderColor;
                            } else {
                                if (input.style.color != global.unPlaceholderColor)
                                    input.style.color = global.unPlaceholderColor;//暗黑色
                            }
                        }
                    })(placeholder);
                }
            }
        });
    }
}(typeof window !== "undefined" ? window : this));
 

1、引入外掛指令碼（可放在任意位置）

<script type="text/javascript" src="placeholderIE.js"></script>

<input placeholder="智學無憂IT教育">

body{
            text-align: center;
            padding: 80px;
        }
        input{
            height: 30px;
            width: 200px;
        }
 

4、效果圖（完美支援）

5、文字自定義顏色（留了一個個性化設定字型顏色的介面給大家）

<script type="text/javascript" src="placeholderIE.js"></script>
    <script type="text/javascript">
         placeholderColor="blue";
         unPlaceholderColor="red";
    </script>

真正的做到我的地盤我做主！

-----------------------------歡迎大家轉載，提出寶貴的建議，讓程式碼更加的完善------------------------------------------------------------