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

作者:norion时间:2012年5月20日评论次数:0 条

在《“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就可以判断是否存在,所有用获取对象的长度的方式来正确判断对象是否存在。

标签:

上一篇: jQuery实现简单的tabs选件卡封装

下一篇:搞定timthumb.php创建缓存时出现的错误

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注