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 时的效果：
时间： 2024-10-16 08:40:34