//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);