让所有浏览器都支持HTML5 placeholder属性

HTML5的placeholder属性

placeholder 属性是 HTML5 中的新属性,俗名叫“占位符”,功能类似于输入框在得到焦点时,时面的默认值会变成空白,当失去焦点时又会显示默认的文本,我想大家一定使用js/jquery制作过这样的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。

让IE浏览器支持HTML5的placeholder(占位符)属性方法:

演示效果

检测浏览器是否支持placeholder属性

$.support.placeholder = false;
if ("placeholder" in document.createElement("input")) $.support.placeholder = true;

源代码

  $(function () {
	  $.support.placeholder = false;
	  if ("placeholder" in document.createElement("input")) $.support.placeholder = true;
  
	  if (!$.support.placeholder) {
		  var active = document.activeElement;
		  $(":text, textarea").live("focus", function () {
			  if ($(this).attr("placeholder") != "" && $(this).val() == $(this).attr("placeholder")) {
				  $(this).val("").removeClass("placeholder");
			  }
		  }).live("blur", function () {
			  if ($(this).attr("placeholder") != "" && ($(this).val() == "" || $(this).val() == $(this).attr("placeholder"))) {
				  $(this).val($(this).attr("placeholder")).addClass("placeholder");
			  }
		  });
		  $(":text, textarea").blur();
		  $(active).focus();
		  $("form").submit(function () {
			  $(this).find(".placeholder").each(function () { $(this).val(""); });
		  });
	  }
  
  });

“让所有浏览器都支持HTML5 placeholder属性”的9个回复

  1. 楼主你这个写反了吧,你这样不支持的浏览器还是不支持,支持的浏览器反而多此一举 这样才对啊! if (!$.support.placeholder) {}

  2. 这个博代码拷贝下来不是很好用啊,有引号问题,笑脸问题,缩进问题

  3. 写的不错,多谢分享,学习了 谢谢楼主。 多更新, 会常光顾的。

发表评论

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