HTML5 placeholder(空白提示)屬性介紹

2020-03-24 16:29:31

字體：大中小

來源：轉載

供稿：網(wǎng)友

原文地址：HTML5 s placeholder Attribute
演示地址: placeholder演示
原文日期： 2010年08月09日
翻譯日期： 2013年8月6日
瀏覽器引入了許多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜歡的一個就是為input元素引入了placeholder屬性。
placeholder屬性顯示引導性文字直到輸入框獲取輸入焦點,當有了用戶輸入內(nèi)容后引導性內(nèi)容將會自動隱藏。你肯定見過用JavaScript實現(xiàn)的這種技術成千上萬次了,但是來自HTML5的原生支持一般來說會更好一些。
HTML 代碼如下：

復制代碼代碼如下:
input type="text" name="address" placeholder="請輸入常住地址..."

你要做的僅僅是添加一個placeholder屬性域,以及一些引導性的文字內(nèi)容,不需要額外的JavaScript腳本來實現(xiàn)這種效果，是不是感覺很棒?
測試 placeholder 的支持度
(注意這是2010年的文章，到現(xiàn)在，2013年，主流瀏覽器應該都支持了.)
既然 placeholder 是一個新的功能，那么測試瀏覽器的支持是很有必要的。JS代碼如下：

復制代碼代碼如下:
// 在JS中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

而如果瀏覽器不支持placeholder特性，那你就需要一個fallback策略來處理，比如MooTools,Dojo,或者其他JavaScript工具。(現(xiàn)在dojo可以用的少了，國內(nèi)更多的是jQuery和ExtJS。)

復制代碼代碼如下:
/* 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);
}
});
}
});

placeholder 是瀏覽器另一個偉大的附加屬性用于取代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)建一個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
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5實現(xiàn)動畫效果的方式匯總

下一篇：關于script在html中的擺放位置解析