在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果。下面直接上代码:

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>placeholder</title>
<style type="text/css">
*{margin:0;padding:0;}
form {margin:50px;}
input {display:block;margin:0 0 6px 0;}
</style>
</header>
<body>
<form>
用户名:<input name="name" placeholder="请输入用户名"/>
密码:<input name="password" placeholder="请输入登陆密码"/>
</form>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
function placeholderSupport() { // 判断浏览器是否支持 placeholder
return 'placeholder' in document.createElement('input');
} if(!placeholderSupport()){
$(document).on('focus', '[placeholder]',function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
});
$(document).on('blur', '[placeholder]',function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
$('[placeholder]').blur();
};
});
</script>
</body>
</html>

'placeholder' in document.createElement('input') ,该行代码利用 in 表达式来判断浏览器中的 input 元素中是否有 placeholder 属性存在。

$('[placeholder]') 是一个Jquery 的属性选择器,选择页面上所有的具有 placheholder 属性的元素。在页面加载完成时我们首先调用  blur() 方法,将所有 input 元素的值 设置 为 input 属性 placeholder 对应的值,从而模拟 placeholder 的效果。

效果如下图所示:

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

选中 input 时的效果:

在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

上一篇:JavaScript浏览器检测之navigator 对象


下一篇:IE8的parseInt