HTML5 placeholder属性兼容性处理方法
转载

HTML5  placeholder属性兼容性处理方法
本文主要解决部分浏览器不支持Placeholder属性的兼容问题。

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现,有了Placeholder,一切都变得很简单。美中不足的是placeholder是个新增属性,目前只有少数浏览器支持,下面这段代码可以解决部分浏览器不支持Placeholder属性的兼容问题。

    if( !('placeholder' in document.createElement('input')) ){   
	    $('input[placeholder],textarea[placeholder]').each(function(){    
	      var that = $(this),    
	      text= that.attr('placeholder');    
	      if(that.val()===""){    
	            that.val(text).addClass('placeholder');    
	      }    
	      that.focus(function(){    
	        if(that.val()===text){    
	            that.val("").removeClass('placeholder');    
	        }    
	      }).blur(function(){    
	        if(that.val()===""){    
	            that.val(text).addClass('placeholder');    
	        }    
	      }).closest('form').submit(function(){    
	        if(that.val() === text){    
	            that.val('');    
	        }    
	      });    
	    });    
    }

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:html5placeholder

文章链接:http://www.gouguoyin.cn/html5/30.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情