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开始已经不支持浏览器检测了。

原创文章:placeholder占位符兼容性及拓展 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/placeholder.html)
评论已关闭。

“placeholder占位符兼容性及拓展”有1个评论

  1. 懒人建站

    博主有点凑文章的赶脚

    登录回复