禿頭筆記2——IE9及如下placeholder

前端程序員的世界，有個讓人十分懼怕的惡魔——IE瀏覽器。

話說，最近手頭有一個需求，產品經理說須要兼容至IE6。。。 本寶的心情也是十分沉重的，怎麼說，如今也是法治社會了，唉。因而我撩了撩所剩很少的頭髮，抄起鍵盤，就是一個字：幹！

先說一個題外話，在IE6下吃的一個虧。

當我抄起鍵盤，興高采烈、風馳電掣地進行各類騷操做時，卻不知，我忘記了IE6終歸是IE6。儘管我成功避免了全部css3的選擇器和屬性，仍是着了6爺的道兒。說實話，之前的時候歷來沒有想過6爺有時候連css2的選擇器都不認識。

.xx-panel > .xx-panel-heading {
    ...
}

.xx-panel > .xx-panel-body {
    ...
}
複製代碼

> 選擇器是css2中的子代選擇器，僅用於選擇子代（不包括子元素中的後代元素），儘管如此，喝醉的6爺可無論這些，因此，推薦在開發IE6頁面的時候儘量不要太騷。

好了，題外話就說這麼多。進入正題，今天說的內容是IE中的placeholder屬性。placeholder是HTML5中提示文字的屬性，翻開文檔，查了一下，在IE中的兼容性並非太好，只有10+版本才支持。兼容性如此之差，怎麼辦呢？沒事，勞動人民啥都缺，就是不缺勤勞的雙手————我用雙手成就你的夢想。

demo地址：demo.dyrily.cn/placeholder…

/**
         * @method placeholder
         * @param tips[string] 提示文字，默認''
         * @param color[string] 提示文字顏色，默認#757575
         */
        $.fn.placeholder = function (tips, color) {
            var $el = this;
            color = color || '#757575';
            tips = tips || '';
            if (!$el.val()) {
                $el.css({color: color});
            }
            $el.removeAttr('placeholder').val(tips).data('iswrite', false).on('focus', function () {
                if (!$(this).data('iswrite')) {
                    $(this).data('iswrite', true).val('').css({color: ''});
                }
            }).on('blur', function () {
                if (!$(this).val() && $(this).data('iswrite')) {
                    $(this).data('iswrite', false).val(tips).css({color: color});
                }
            });
        };
複製代碼

這裏爲了省事，咱們將其綁定在jQuery對象上，調用的時候也很簡單：$('.input').placeholder('請輸入...')，不只如此，還支持自定義顏色的placeholder。瞬間，感受比原生的placeholder更洋氣了，有木有？

可能還有些童鞋擔憂，這樣操做輸入框的value，那提交的時候會不會影響取值呢？那我就認真負責的告訴你：會的。。。可是不用擔憂，咱們還準備了另外一個方法，鐺鐺鐺：

/**
         *  使用了以上placeholder方法的輸入框，獲取value時使用getVal
         */
        $.fn.getVal = function () {
            var $el = this;
            if ($el.data('iswrite')) {
                return $el.val();
            } else {
                return '';
            }
        };
複製代碼

使用了placeholder方法的輸入框，取值的時候使用這個getVal方法來取值，就不會形成影響了。

原創文章，轉載註明出處。看完點贊，月薪破萬。(^_^)v

----------------------------------2019-02-28 分割線----------------------------------

bug修復

個別瀏覽器存在一個狀況，就是刷新頁面後，輸入框中的值還在的狀況。致使顏色沒能及時改變。

如下是改進後的代碼：

$.fn.placeholder = function (tips, color, isNew) {
    var $el = this;
    color = color || '#757575';
    tips = tips || '';
    $el.removeAttr('placeholder');
    if (isNew) {
        $el.removeData('iswirte');
        $el.off('focus');
        $el.off('blur');
    }
    if (typeof $el.data('iswrite') === 'undefined') {
        if ($el.val()) {
            $el.data('iswrite', $el.val() !== tips);
        } else {
            $el.data('iswrite', false);
        }
    }
    if (!$el.data('iswrite')) {
        $el.val(tips).css({color: color});
    }
    $el.on('focus', function () {
        if (!$(this).data('iswrite')) {
            $(this).data('iswrite', true).val('').css({color: ''});
        }
    }).on('blur', function () {
        if (!$(this).val() && $(this).data('iswrite')) {
            $(this).data('iswrite', false).val(tips).css({color: color});
        }
    });
};
複製代碼