HTML5 placeholder(空白提示)属性介绍

2020-04-21 07:17:26易采站长站整理

<script>
// 在JS中创建一个input元素,并判断元素有没有一个叫做placeholder的属性
// 如果浏览器支持的话,那么在js里面引用的DOM就会存在这个属性
function hasPlaceholderSupport() {
var input = document.createElement(‘input’);
return (‘placeholder’ in input);
}
/* jQuery 代码,当然,记得引入jQuery的库哦*/
$(function(){
if(!hasPlaceholderSupport()){
// 获取address元素
var $address = $(“input[name=’address’]”);
placeholder = $address.attr(“placeholder”);
// 绑定 focus事件
$address.bind(‘focus’,function(){
if(placeholder == $address.val()){
$address.val(”);
}
});
// 失去焦点事件
$address.bind(‘blur’,function(){
if(” == $address.val()){
$address.val(placeholder);
}
});
}
});
</script>
</head>
<body>
<div>
<form method=”post” action=””>
<input type=”text” name=”address” placeholder=”请输入常住地址…”>
<input type=”submit” value=”测试”>
</form>
</div>
</body>
</html>