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插件