HTML5 placeholder(空白提示)屬性介紹_html5教學技巧

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

複製代碼

代碼如下:

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

複製程式碼

程式碼如下:

程式碼如下:


// 在JS建立input元素，並判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支援的話，那麼在js裡面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {

var input = document.createElement('input');
return ('placeholder' in input);
}

而如果瀏覽器不支援placeholder fallback策略來處理，例如MooTools,Dojo,或其他JavaScript工具。 (現在dojo可以用的少了，國內更多的是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樣式.

全部程式碼如下：

複製程式碼程式碼複製程式碼程式碼

<script> <br />// 在JS建立一個input元素，並且判斷元素有沒有一個叫做placeholder的屬性<br />// 如果瀏覽器支援的話，那麼在js裡面引用的DOM就會存在這個屬性<br />function hasPlaceholderSupport() { <br />var input = document.createElement('input'); <br />return ('placeholder' in input); <br />} <br />/* jQuery 程式碼,當然，記得引入jQuery的庫哦*/ <br />$(function( ){ <br />if(!hasPlaceholderSupport()){ <br />// 取得address元素<br />var $address = $("input[name='address']"); <br />placeholder = $address. attr("placeholder"); <br />// 綁定focus事件<br />$address.bind('focus',function(){ <br />if(placeholder == $address.val()){ <br />$address.val(''); <br />} <br />}); <br />// 失去焦點事件<br />$address.bind('blur',function(){ <br />if(' ' == $address.val()){ <br />$address.val(placeholder); <br />} <br />}); <br />} <br />}); <br /></script>