您的位置：首页 > 其它

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

2015-04-14 11:44 906 查看

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 的效果。

效果如下图所示：

选中 input 时的效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航