HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法,并且比它更强大,
但是万恶的IE8却不兼容。
可以使用JavaScript来解决IE8兼容问题,在IE8下,自动替换成onfocus方法,
在支持HTML5的浏览器中则还是用Placeholder,不干扰。
首先需要添加jQuery
如果你的网站已经添加了jQuery,请忽略这一部。
在网站Head标签内添加:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">
</script>
添加js代码
将以下代码添加到</body>之前的任意位置:
<script type="text/javascript">
if( !('placeholder' in document.createElement('input')) ){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(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>
分享到:
相关推荐
IE8 placeholder 兼容使用插件。可兼容password类型,可以正常显示提示字。
placeHolder是html5加入的新属性,此代码基于jQuery实现placeholder属性功能。
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
兼容ie8、ie9的placeholder属性,其他浏览器用自身的placeholder。在ie8和ie9浏览器,点击span则让input聚焦。
javascript版placeholder解决一些浏览器不支持placeholder属性的问题
ie6 7 8兼容html5属性placeholder
用span标签定位到placeholder位置,用jq控制span的显示和隐藏。
完美兼容H5 placeholder属性在IE9及以下版本的问题 自测可用,修改点少
jquery 代码解决placeholder不换行,不居中问题
处理IE不兼容placeholder的JS文件
基于jQuery的placeholder组件,支持IE8及以下
原生手写的IEplaceholder.js插件,能够解决在IE9及以下浏览器上placeholder不能显示的bug,使用时只需要引入该IEplaceholder.js插件,然后获取所有的input节点,最后调用函数iePlaceholder(nodes,color)即可,nodes...
现在流行html5了都,所有的浏览器都支持placeholder,唯独IE不支持,那么这插件将完美解决IE浏览器不兼容input标签的placeholder属性.
IE8兼容提示语 !
但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性: 复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if...
解决IE下不支持placeholder属性
JavaScript文本框提示插件placeholder
几个常用插件,让ie8兼容html5和css的圆角,阴影、渐变、placeholder等属性
jquery插件解决IE6到IE9版本不支持placeholder的问题,支持同一个网页包含多个password input的版本。用法:下载插件并引用,将插件代码里面的login-input改成自己的密码input输入框的样式即可。
这里面是一个支持IE9以及IE9一下的兼容支持placeholder的javascript案例。本示例是争对textarea写的,修改后可以争对input。另外textarea只需要添加一个name="textarea" 即可实现。需要实现input支持的,需要修改三...