用JavaScript解决Placeholder的IE8兼容问题

BUAACST 2014-10-29

用JavaScript解决Placeholder的IE8兼容问题

HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法,并且比它更强大,

但是万恶的IE8却不兼容。

可以使用JavaScript来解决IE8兼容问题,在IE8下,自动替换成onfocus方法,

在支持HTML5的浏览器中则还是用Placeholder,不干扰。

首先需要添加jQuery

如果你的网站已经添加了jQuery,请忽略这一部。

在网站Head标签内添加:

<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.5.2.min.js">

</script>

添加js代码

将以下代码添加到</body>之前的任意位置:

<scripttype="text/javascript">

if(!('placeholder'indocument.createElement('input'))){

$('input[placeholder],textarea[placeholder]').each(function(){

varthat=$(this),

text=that.attr('placeholder');

if(that.val()===""){

that.val(text).addClass('placeholder');

}

that.focus(function(){

if(that.val()===text){

that.val("").removeClass('placeholder');

}

})

.blur(function(){

if(that.val()===""){

that.val(text).addClass('placeholder');

}

})

.closest('form').submit(function(){

if(that.val()===text){

that.val('');

}

});

});

}

</script>

相关推荐