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)

发表评论

请登录后发表评论:

1 Responses to “placeholder占位符兼容性及拓展”

  1. 懒人建站

    博主有点凑文章的赶脚

    登录回复