瀏覽器引入了許多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜歡的一個(gè)就是為input元素引入了placeholder屬性。
placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點(diǎn),當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會(huì)自動(dòng)隱藏。你肯定見(jiàn)過(guò)用JavaScript實(shí)現(xiàn)的這種技術(shù)成千上萬(wàn)次了,但是來(lái)自HTML5的原生支持一般來(lái)說(shuō)會(huì)更好一些。
HTML 代碼 如下：
代碼如下:
<input type="text" name="address" placeholder="請(qǐng)輸入常住地址...">
你要做的僅僅是添加一個(gè)placeholder屬性域,以及一些引導(dǎo)性的文字內(nèi)容,不需要額外的JavaScript腳本來(lái)實(shí)現(xiàn)這種效果，是不是感覺(jué)很棒?
測(cè)試 placeholder 的支持度
(注意這是2010年的文章，到現(xiàn)在，2013年，主流瀏覽器應(yīng)該都支持了.)
既然 placeholder 是一個(gè)新的功能，那么測(cè)試瀏覽器的支持是很有必要的。JS代碼如下：
代碼如下:
// 在JS中創(chuàng)建一個(gè)input元素，并判斷元素有沒(méi)有一個(gè)叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會(huì)存在這個(gè)屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
而如果瀏覽器不支持placeholder特性，那你就需要一個(gè)fallback策略來(lái)處理，比如MooTools,Dojo,或者其他JavaScript工具。(現(xiàn)在dojo可以用的少了，國(guó)內(nèi)更多的是jQuery和ExtJS。)
代碼如下:
/* jQuery 代碼,當(dāng)然，記得引入jQuery的庫(kù)哦*/
$(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);
}
});
}
});
placeholder 是瀏覽器另一個(gè)偉大的附加屬性用于取代js片段，你甚至可以編輯HTML5的placeholder樣式.
全部代碼如下：
代碼如下:
<!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)建一個(gè)input元素，并判斷元素有沒(méi)有一個(gè)叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會(huì)存在這個(gè)屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery 代碼,當(dāng)然，記得引入jQuery的庫(kù)哦*/
$(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="請(qǐng)輸入常住地址...">
<input type="submit" value="測(cè)試">
</form>
</div>
</body>
</html>
公考類(lèi)
招聘類(lèi)
各類(lèi)考試版權(quán)所有:易賢網(wǎng)
公眾號(hào)
事業(yè)單位
當(dāng)前位置：