<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 placeholder屬性演示 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="original=http://davidwalsh.name/html5-placeholder">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// 在JS中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery 代碼,當(dāng)然，記得引入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('');
}
});
// 失去焦點(diǎn)事件
$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>
