jQuery placeholder插件 让IE也能够支持placeholder属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery placeholder插件 让IE也能够支持placeholder属性相关的知识,希望对你有一定的参考价值。

jQuery placeholder插件 让IE也能够支持placeholder属性

案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位。这种代码我想前端们已经很容易就写出来了吧,现在html5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即javascript

;(function ($) {
    $.fn.extend({
        placeholder : function () {
            if ("placeholder" in document.createElement("input")) {
                return this //如果原生支持placeholder属性,则返回对象本身
            } else {
                return this.each(function () {
                    var _this = $(this);
                    _this.val(_this.attr("placeholder")).focus(function () {
                        if (_this.val() === _this.attr("placeholder")) {
                            _this.val("")
                        }
                    }).blur(function () {
                        if (_this.val().length === 0) {
                            _this.val(_this.attr("placeholder"))
                        }
                    })
                })
            }
        }
    })
})(jQuery);

通过脚本判断浏览器是否原生支持placeholder属性来动态加载这个脚本

if(!"placeholder" in document.createElement("input")){
    $.getScript("jquery.placeholder.js",function(){
        $("#keyword").placeholder();//让id=keyword的元素支持placeholder,换成你自己的选择器
    })
}

 

以上是关于jQuery placeholder插件 让IE也能够支持placeholder属性的主要内容,如果未能解决你的问题,请参考以下文章

实用的placeholder插件,兼容IE下的placeholder,jquery插件

学习jquery.placeholder.js让IE浏览器支持html5的placeholder

兼容placeholder

跨浏览器实现placeholder效果的jQuery插件

placeholder兼容IE8解决方案

IE9及以下兼容placeholder