placeHolder 兼容所有浏览器

//placeHolder 插件
(function($){

    $.fn.placeHolder=function(options){
        if(typeof options == "string"){
            return $.fn.placeHolder.methods[options](this);
        }
        options = options || {};

        return this.each(function(){
            var setting = $.data(this, "placeholder");
            if(setting){
                setting = $.extend(setting, options);    
            }else{
                var opts = $.extend({}, $.fn.placeHolder.defaults, options),
                    self = this;
                opts = {options : opts, label : $('<label>')}
                $.data(this, "placeHolder", opts);

                setTimeout(function(){
                    create(self, opts);
                })
            }
        })
    };

    if ('placeholder' in document.createElement('INPUT')){
        $.fn.placeHolder = function(){}
    }

    function create(target,opts){

        var _self = $(target),
            _placeholder = _self.attr('placeholder'),
            _label = opts.label,
            _div = $('<div>'),
            _className = opts.options.className;

        if(typeof _placeholder === 'undefined'){
            return
        }

        _label.addClass(_className).
            html(_placeholder).
            appendTo(_div).
            click(function () {
                _self.get(0).focus();
            });
        _label.get(0).oncontextmenu = function(event){
            _self.get(0).focus();
        };
        _div.css({position:"relative"}).insertAfter(_self);
        bindPlaceHolder( target );
        if(_self.val().length > 0){
            _self.placeHolder('hide');
        }
    };

    function toggleHolder(){
        var self = this;
        setTimeout(function(){
            var type = self.value == '' ? 'show' : 'hide';
            $(self).placeHolder( type );
        },0)
    }


    function bindPlaceHolder( target ){
        $(target).on('keyup blur cut paste change', toggleHolder)
    }

    $.fn.placeHolder.methods = {
        show:function(jq){
            return jq.each(function(){
                $(this).data("placeHolder").label.show();
            });
        },
        hide:function(jq){
            return jq.each(function(){
                $(this).data("placeHolder").label.hide();
            });
        }
    };

    $.fn.placeHolder.defaults  = {className:'placeholder'};

})(jQuery);

 

转载于:https://www.cnblogs.com/bjmumu/p/3408646.html