jquery水印插件：placeholder

jquery水印插件：placeholder

有的浏览器支持html5的水印placeholder（如Crome，firefox，ie10+)，有的不支持html5的placeholder（ie9，ie8，ie7....），对于不支持placeholder的属性也能使用placeholderAttr，于是写了这个简单的jquery插件，发出来与大家分享，实现代码逻辑在代码中都有注释，实现细节请直接参看代码。

/**
 * jqueryPlug : 给不支持html5 placeholder水印功能的浏览器打补丁
 */

;(function($){
    'use strict';
    /////////////////////////////////////////////////////////

    /*
     * 扩展jquery实例方法
     */
    $.fn.powerplaceholder = function(){

        /*
         * PlaceHolder 实例构造函数
         * @param [DOM Instance] elm
         */
        var PlaceHolder = function(elm){
            this.$elm = $(elm);
            this.$span = $("<span></span>").text(this.$elm.attr("placeholder")).css({
                "position":"absolute",
                "display":"inline-block",
                "color":"#ccc",
                "overflow":"hidden",
                "padding-left":"2px",
                "padding-top":"2px",
                "left":this.$elm.offset().left,
                "top":this.$elm.offset().top,
                "font-size":this.$elm.css("font-size"),
                "width":this.$elm.width()+2,
                "height":this.$elm.height()+2
            }).appendTo("body");
            this.init();
        }

        /**
         * 静态方法：是否支持html5的placeholder
         */
        PlaceHolder.isSupportHtml5 = function(){
            var i = document.createElement('input');
            return 'placeholder' in i;
        }

        /**
         * 实例方法：
         */
        PlaceHolder.prototype = {

            /*
             * 控制setInterval方法的实例，释放setInterval
             */
            intervalInstance:null,

            /*
             * @function 初始化
             */
            init:function(){
                this.showOrHide();

                this.$elm.on("focus.PlaceHolder",$.proxy(this.focus,this))
                         .on("blur.PlaceHolder",$.proxy(this.blur,this));

                this.$span.on("click.PlaceHolder",$.proxy(this.clickSpan,this));
            },

            /*
             * 聚焦
             */
            focus:function(){
                var self = this;

                // 不要重复调用setInterval
                if (self.intervalInstance) {
                    return;
                }

                /*
                 * 应该所示插件的核心：每隔50s判断一下输入框是否有值，有值显示，无值隐藏；
                 * 权衡是否这里应该使用keydown来做这个事情，使用setInverval是不是太耗费资源了？？
                 */
                self.intervalInstance = setInterval(function(){
                    self.showOrHide();
                },50);
            },

            /*
             * 失焦
             */
            blur:function(){

                // clearInterval
                clearInterval(this.intervalInstance);
                this.intervalInstance = null;

                this.showOrHide();
            },

            /*
             * 点击span时要触发输入框的focus事件
             */
            clickSpan:function(){
                this.$elm.trigger("focus.PlaceHolder");
            },

            /*
             * 输入框有值显示placeholder，没有值隐藏placeholder
             */
            showOrHide:function(){
                if (this.$elm.val()) {
                    this.$span.hide();
                }else{
                    this.$span.show();
                }
            }
        };

        /**
         * 插件入口
         * 支持html5的，采用原生态支持，不做任何处理；不支持html5 placeholder的采用插件实现模式支持
         */
        if (!PlaceHolder.isSupportHtml5()) {
            return this.each(function(){
                new PlaceHolder(this);
            });
        }else{
            return this;
        };
    }
})(jQuery);

 

 

分类: Jquery

标签: Jquery, 插件开发, jquery插件