秃头笔记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});
        }
    });
};
复制代码