placeholder占位符兼容性及拓展

占位符(placholder)是HTML5里面的一个新的元素,以前的时候我们一直是通过value=”这里是提示内容”,然后通过js的形式来控制的,现在有了这个,高级浏览器都不用这个value这么麻烦了。

placeholder不支持IE10以下的浏览器,所以我们要使用还得需要用到js来兼容以下。

下面这段是比较流行的jquery兼容方式:

$(function(){
if($.browser.msie && ( $.browser.version<=9)){
$("[placeholder]").focus(function(){var e=$(this);e.val()==e.attr("placeholder")&&(e.removeClass("placeholder"),e.val(""))}).blur(function(){var e=$(this);if(e.val()==""||e.val()==e.attr("placeholder"))e.addClass("placeholder"),e.val(e.attr("placeholder"))}).blur();
}
)}

发现自己用的时候不起作用了,再发给原始的代码吧,你可以给placeholder的层添加一个类,同时添加一个css样式,.placeholder{color:#999;}

$('[placeholder]').focus(function(){
var input = $(this);
if(input.val() == input.attr('placeholder')){
input.removeClass("placeholder");
input.val('');
}
}).blur(function(){
var input = $(this);
if(input.val() == '' || input.val() == input.attr('placeholder')){
input.addClass("placeholder");
input.val(input.attr('placeholder'));
}
}).blur();

发现不起作用,是因为我用了较高的jQuery版本,而jQuery从1.9开始已经不支持浏览器检测了。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流