修复"Placeholder跨浏览器兼容插件 v1.0"的小bug

作者:沙师弟时间:2012-05-18
在《“jQuery实现Placeholder跨浏览器兼容问题”的改进》一文中,我将Placeholder跨浏览器兼容问题用jQuery封装成插件,只要用以下方式可以调用placeholder插件:
jQuery(function (jQuery) {
	jQuery('#searchText').placeholder();
});
但是这样会出现一个问题,如果页面上没有“#searchText”元素,那么就可以会出差错,以致影响其他代码的执行,下面是我遇到的问题的截图: placeholder错误提示 综上原因,我做了个小小的修改,在插件编写的时候多判断了“#searchText”是否存在,问题就迎刃而解了:
(function($){
	/*******************************
	 * @name placeholder兼容插件 v1.1
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.05.18
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.placeholder = function(){
		var searchText = this;
		var searchValue = searchText.attr('placeholder');
		if( searchText.length > 0 ){
			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的对象比较特殊,不像原生的getElementById就可以判断是否存在,所有用获取对象的长度的方式来正确判断对象是否存在。