当前位置: 首页 > 前端笔记 > JAVASCRIPTS > javascript判断浏览器是否支持placeholder
2014年21六月

javascript判断浏览器是否支持placeholder

前几天写一个表单美化的插件,用到了备注一下。

placeholder是个HTML5新增属性,目前只有少数浏览器支持。placeholder大概就是占位符的意思吧,在可输入控件中,“占位符”一般作提示用,简洁明了,空间利用率高。这个属性确实是个好东西。只是不同的浏览器下表现的方式不一样,如IE下focus提示文字就消失了,火狐下是有按键才会消失。我是个懒惰主义者,这种问题我并不在乎。但是IE8是没有这个属性的,没办法谁让WIN7默认带的就是IE8呢?如何检测浏览器是否支持它呢?

var hasPlaceholderSupport = function(){
	var attr = "placeholder";
	var input = document.createElement("input");
	return attr in input;
}

支持返回就是true,不支持返回fasle。OK,如果不支持怎么办?

var support = hasPlaceholderSupport();
if(!support){
	$("body").on("focus", "input", function(){
		var me = $(this);
		var placetext = me.attr("placeholder");
		if(me.val()==placetext){
			me.val("");	
		} else {
			me.select();	
		}
		me.addClass("focusclass").removeClass("blurclass");
	}).on("blur", "input", function(){
		var me = $(this);
		var placetext = me.attr("placeholder");
		if(me.val()==""){
			me.val(placetext).addClass("blurclass").removeClass("focusclass");	
		}
	});
}

不支持就是加2个事件而已。用“focus”是模拟IE的效果,如果要模拟火狐的效果那么你就要用到“keydown”了。试试吧!

文章信息

  • 发布日期:2014年06月21日 14:11:27
  • 固定地址:http://www.estorm.cn/notes/javascripts/2014-06-21/js-browser-supports-placeholder.html