秃头笔记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地址：http://www.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});
        }
    });
};