“jQuery实现Placeholder跨浏览器兼容问题”的改进

作者:沙师弟时间:2012-05-18
读了上一篇“jquery实现简单的Placeholder跨浏览器兼容问题”,你是不是觉得可以还在进一步呢! 之前的代码是这样的:
var searchValue = "请输入搜索关键词";
if ( !( 'placeholder' in document.createElement('input') ) ){
	jQuery("#search").removeAttr("placeholder").val(searchValue).bind("focus",function(){
		if (this.value==searchValue){this.value="";};
	}).bind("blur",function(){
		if (this.value==""){this.value=searchValue;};
	});
}else{
	jQuery("#search").bind("focus",function(){
		if ( jQuery(this).attr('placeholder') == searchValue ){ jQuery(this).attr('placeholder','') };
	}).bind("blur",function(){
		if ( jQuery(this).attr('placeholder','') ){ jQuery(this).attr('placeholder',searchValue) };
	});
}
下面我就来说说这个的方式的改进,我们还可以做的更好。
(function(){
	var searchText = jQuery('#searchText');
	var searchValue = searchText.attr('placeholder');
	if ( !( 'placeholder' in document.createElement('input') ) ){
		searchText.removeAttr('placeholder').val(searchValue).bind('focus',function(){
			if ( this.value==searchValue) {this.value=''; };
		}).bind('blur',function(){
			if ( this.value=='' ){ this.value=searchValue; };
		});
	}else{
		searchText.bind('focus',function(){
			if ( jQuery(this).attr('placeholder') == searchValue ){ jQuery(this).attr('placeholder','') };
		}).bind('blur',function(){
			if ( jQuery(this).attr('placeholder','') ){ jQuery(this).attr('placeholder',searchValue) };
		});
	}
})();
我用"var searchText = jQuery('#searchText');"来改进"var searchValue = '请输入搜索关键词';"这样我们就可以直接在html中输出placeholder的值也不用去顾虑value怎么办! 到这里你是否觉得OK了?那如果一个页面上要是有多个输入框,难道要重复写上这么一段,NO!我们还可以做的更好,jQuery为我们提供了很好的插件机制,我们可以利用jQuery的插件把上面那段代码封装成一个插件。
(function($){
	/*******************************
         * @name Placeholder跨浏览器兼容插件 v1.0
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.04.15
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.placeholder = function(){
		var searchText = this;
		var searchValue = searchText.attr('placeholder');
		if ( !( 'placeholder' in document.createElement('input') ) ){
			searchText.removeAttr('placeholder').val(searchValue).bind('focus',function(){
				if ( this.value==searchValue) {this.value=''; };
			}).bind('blur',function(){
				if ( this.value=='' ){ this.value=searchValue; };
			});
		}else{
			searchText.bind('focus',function(){
				if ( jQuery(this).attr('placeholder') == searchValue ){ jQuery(this).attr('placeholder','') };
			}).bind('blur',function(){
				if ( jQuery(this).attr('placeholder','') ){ jQuery(this).attr('placeholder',searchValue) };
			});
		}
	}
})(jQuery);
jQuery(function (jQuery) {
	jQuery('#searchText').placeholder();
});
这样我们就可以重复利用这段代码了,当然我们还可以做的更好,如果有高手路过,还请拍砖。