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