让Placeholder在IE中燥起来

2015-10-26 11:27 只喝牛奶的杀手阅读(1204) 评论(6) 编辑收藏举报

网上有好多关于这方面解决兼容性问题的文章，很多招式，学会这一招，让你轻松搞定Placeholder的兼容性，叫我好人，拿走，不谢。。。。

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

如

像下图用placeholder刚刚好，但是IE6 7 8 9 不支持呀，一篇空白！此时此刻心情肯定是日了狗！！！！！，搞web开发的一定要考虑兼容性，业界良心需要。。。。

使用前：

使用后：

疗效不一般，使用之后萌萌哒。

目前浏览器的支持情况：

浏览器	IE6/7/8/9	IE10+	Firefox	Chrome	Safari
是否支持	NO	YES	YES	YES	YES

下面分享一个Js文件代码，简单粗暴的把问题解决了：

(function ($) {
    $.fn.myPlaceholder = function (options) {
        var defaults = {
            pColor: "#acacac",
            pFont: "16px",
            posL: 8,
            zIndex: "99"
        },
        opts = $.extend(true, defaults, options);
 
        if ("placeholder" in document.createElement("input")) return;
        return this.each(function () {
            //$(this).parent().css("position", "relative");
            var isIE = $.browser.msie,
            version = $.browser.version;
 
            //不支持placeholder的浏览器
            var $this = $(this),
                msg = $this.attr("placeholder"),
                iH = $this.outerHeight(),
                iW = $this.outerWidth(),
                iX = $this.offset().left,
                iY = $this.offset().top,
                oInput = $("<label>", {
                    "text": msg,
                    "css": {
                        "position": "absolute",
                        "left": iX + "px",
                        "top": iY + "px",
                        "width": iW - opts.posL + "px",
                        "padding-left": opts.posL + "px",
                        "height": iH + "px",
                        "line-height": iH + "px",
                        "color": opts.pColor,
                        "font-size": opts.pFont,
                        "z-index": opts.zIndex,
                        "cursor": "text"
                    }
                }).insertBefore($this);
 
            //初始状态就有内容
            var value = $this.val();
            if (value.length > 0) {
                oInput.hide();
            };
            var myEvent;
            if (isIE && version < 9) {
                myEvent = "propertychange";
            } else {
                myEvent = "input";
            }
            $this.bind(myEvent, function () {
                var value = $(this).val();
                if (value.length > 0) {
                    oInput.hide();
                } else {
                    oInput.show();
                }
            });
            oInput.click(function () {
                $this.trigger("focus");
            });
        });
    }
})(jQuery);