4.4　HTML5全局屬性

HTML5除了支持HTML4原有的全局屬性之外，還添加了8個新的全局屬性。所謂全局屬性是指可以用于任何HTML元素的屬性。

4.4.1　可編輯內容

contenteditable屬性的主要功能是允許用戶可以在線編輯元素中的內容。contenteditable是一個布爾值屬性，可以指定為true或false。

注意，該屬性還有個隱藏的inherit（繼承）狀態，屬性為true時，元素被指定為允許編輯；屬性為false時，元素被指定為不允許編輯；未指定true或false時，則由inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。

【示例】在下面的示例中為正文文本包含框<div>標簽加上contenteditable屬性后，該包含框包含的文本就變成可編輯的了，瀏覽者可自行在瀏覽器中修改內容，執行結果如圖4.11所示。

圖4.11　可編輯文本

在編輯完元素中的內容后，如果想要保存其中內容，只能使用JavaScript腳本把該元素的innerHTML發送到服務器端進行保存，因為改變元素內容后該元素的innerHTML內容也會隨之改變，目前還沒有特別的API來保存編輯后元素中的內容。

4.4.2　快捷菜單

contextmenu屬性用于定義元素的上下文菜單。所謂上下文菜單，就是會在用戶右鍵單擊元素時出現。

【示例】下面的示例是使用contextmenu屬性定義div元素的上下文菜單，其中contextmenu屬性的值是要打開的menu元素的id屬性值。

當用戶右鍵單擊元素時，會彈出一個上下文菜單，從中可以選擇指定的快捷菜單項目，如圖4.12所示。

圖4.12　打開上下文菜單

4.4.3　自定義屬性

使用data-*屬性可以自定義用戶數據。具體應用包括如下兩點。

• 　data-*屬性用于存儲頁面或元素的私有數據。
• 　data-*屬性賦予所有HTML元素嵌入自定義屬性的能力。

存儲的自定義數據能夠被頁面的JavaScript腳本利用，以創建更好的用戶體驗，方便Ajax調用或服務器端數據庫查詢。

data-*屬性包括以下兩部分。

• 　屬性名：不應該包含任何大寫字母，并且在前綴"data-"之后必須有至少一個字符。
• 　屬性值：可以是任意字符串。

當瀏覽器解析時，會忽略前綴"data-"，取用其后的自定義屬性。

【示例1】下面的示例是使用data-*屬性為每個列表項目定義一個自定義屬性type。這樣在JavaScript腳本中可以判斷每個列表項目包含信息的類型。

【示例2】以上面的示例為基礎，下面的示例是使用JavaScript腳本訪問每個列表項目的type屬性值，演示效果如圖4.13所示。

圖4.13　訪問列表項目的type屬性值

訪問元素的自定義屬性，可以通過元素的dataset.對象獲取，該對象存儲了元素所有自定義屬性的值。訪問規則與CSS腳本化訪問相同。對于復合屬性名，通過駝峰命名法訪問，如animal-type，訪問時使用animalType，避免連字符在腳本中引發的歧義。

注意，目前IE暫不支持這種訪問方式。

4.4.4　定義可拖動操作

draggable屬性可以定義元素是否可以被拖動。屬性取值說明如下。

• 　true：定義元素可拖動。
• 　false：定義元素不可拖動。
• 　auto：定義使用瀏覽器的默認行為。

draggable屬性常用在拖放操作中，詳細說明請參考后面章節的“拖放API”。

4.4.5　拖動數據

dropzone屬性定義在元素上拖動數據時，是否復制、移動或鏈接被拖動數據。屬性取值說明如下。

• 　copy：拖動數據會產生被拖動數據的副本。
• 　move：拖動數據會導致被拖動數據被移動到新位置。
• 　link：拖動數據會產生指向原始數據的鏈接。

例如：

    <div dropzone="copy"></div>

4.4.6　隱藏元素

在HTML5中，所有元素都包含一個hidden屬性。該屬性設置元素的可見狀態，取值為一個布爾值，當設為true時，元素處于不可見狀態；當設為false時，元素處于可見狀態。

【示例】下面使用hidden屬性定義段落文本隱藏顯示。

    <p hidden><img src="images/1.jpg" width="200" /></p>

hidden屬性可用于防止用戶查看元素，直到匹配某些條件，如選擇了某個復選框。然后，在頁面加載之后，可以使用JavaScript腳本刪除該屬性，刪除之后該元素變為可見狀態，同時元素中的內容也即時顯示出來。

4.4.7　語法檢查

spellcheck屬性定義是否對元素進行拼寫和語法檢查。可以對以下內容進行拼寫檢查。

• 　input元素中的文本值（非密碼）。
• 　textarea元素中的文本。
• 　可編輯元素中的文本。

spellcheck屬性是一個布爾值的屬性，取值包括true和false，為true時表示對元素進行拼寫和語法檢查，為false時則不檢查元素。用法如下。

    <!--以下兩種書寫方法正確-->
    <textarea spellcheck="true" >
    <input type=text spellcheck=false>
    <!--以下書寫方法錯誤-->
    <textarea spellcheck >

注意，如果元素的readonly屬性或disabled屬性設為true，則不執行拼寫檢查。

【示例】下面的示例設計兩段文本，第一段文本可編輯、可語法檢查；第二段文本可編輯，但不允許語法檢查。當編輯文本時，第一段文本顯示檢查狀態，而第二段忽略，效果如圖4.14所示。

圖4.14　段落文本檢查狀態比較

4.4.8　翻譯內容

translate屬性定義是否應該翻譯元素內容。取值說明如下。

• 　yes：定義應該翻譯元素內容。
• 　no：定義不應翻譯元素內容。

【示例】下面的示例演示了如何使用translate屬性。

    <p translate="no">請勿翻譯本段。</p>
    <p>本段可被譯為任意語言。</p>