《HTML5與CSS3權威指南（第3版·上冊）》——2.4　全域性屬性

華章計算機發表於2017-05-02
HTMLCSSS3

本節書摘來自華章出版社《HTML 5與CSS 3 權威指南（第3版·上冊）》一 書中的第2章，第2.4節，作者：陸凌牛，更多章節內容可以訪問雲棲社群“華章計算機”公眾號檢視。

2.4　全域性屬性

在HTML 5中，新增了一個“全域性屬性”的概念。所謂全域性屬性，是指可以對任何元素都使用的屬性，本節將詳細介紹幾種常用的全域性屬性。

2.4.1　contentEditable屬性

contentEditable是由微軟開發的，被其他瀏覽器反編譯並投入應用的一個全域性屬性。該屬性的主要功能是允許使用者編輯元素中的內容，所以該元素必須是可以獲得滑鼠焦點的元素，而且在點選滑鼠後要向使用者提供一個插入符號，提示使用者該元素中的內容允許編輯。contentEditable屬性是一個布林值屬性，可以被指定為true或false。
除此之外，該屬性還有個隱藏的inherit（繼承）狀態，當屬性值為true時，元素被指定為允許編輯；當屬性值為false時，元素被指定為不允許編輯；當未指定true或false時，則由inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。
另外，除了contentEditable屬性外，元素還具有一個isContentEditable屬性，當元素可編輯時，該屬性值為true；當元素不可編輯時，該屬性值為false。
程式碼清單2-2中給出了一個使用contentEditable屬性的示例，當列表元素被加上contentEditable屬性後，該元素就變成可編輯的了，讀者可自行在瀏覽器中對該示例進行
試驗。
程式碼清單2-2　contentEditable屬性示例

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>conentEditalbe屬性示例</title>
</head>
<h2>可編輯列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>```
這段程式碼執行後的結果如圖2-2所示。

<div style="text-align: center"><img src="https://yqfile.alicdn.com/28e0b65372387d1dfb56593bfb4d2c4821771473.png" width="" height="">
</div>

在編輯完元素中的內容後，要想儲存其中內容，只能把該元素的innerHTML傳送到伺服器端進行儲存，因為改變元素內容後該元素的innerHTML內容也會隨之改變，目前還沒有特別的API來儲存編輯後元素中的內容。
最後，在這裡列舉一下支援contentEditable屬性的元素：defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIR、DIV、DL、DT、EM、FIELDSET、FONT、FORM、hn、I、INPUT type=button、 INPUT type=password、INPUT type=radio、INPUT type=reset、INPUT type=submit、INPUT type=text、INS、ISINDEX、KBD、LABEL。
####2.4.2　designMode屬性
designMode屬性用來指定整個頁面是否可編輯，當頁面可編輯時，頁面中任何支援上文所述的contentEditable屬性的元素都變成了可編輯狀態。designMode屬性只能在JavaScript指令碼中被編輯修改。該屬性有兩個值——“on”與“off”。當該屬性值被指定為“on”時，頁面可編輯；當該屬性值被指定為“off”時，頁面不可編輯。使用JavaScript指令碼來指定designMode屬性的方法如下所示：

document.designMode=”on”`
針對designMode屬性，各瀏覽器的支援情況也各不相同：
IE 8：出於安全考慮，不允許使用designMode屬性讓頁面進入編輯狀態。
IE 9：允許使用designMode屬性讓頁面進入編輯狀態。
Chrome 3和Safari：使用內嵌frame的方式，該內嵌frame是可編輯的。
Firefox和Opera：允許使用designMode屬性讓頁面進入編輯狀態。

2.4.3　hidden屬性

在HTML 5中，所有的元素都允許使用一個hidden屬性。該屬性類似於input元素中的hidden元素，功能是通知瀏覽器不渲染該元素，使該元素處於不可見狀態。但是元素中的內容還是被瀏覽器建立的，也就是說頁面裝載後允許使用JavaScript指令碼將該屬性取消，取消後該元素變為可見狀態，同時元素中的內容也即時顯示出來。hidden屬性是一個布林值的屬性，當設為true時，元素處於不可見狀態；當設為false時，元素處於可見狀態。

2.4.4　spellcheck屬性

spellcheck屬性是HTML 5針對input元素（type=text）與textarea這兩個文字輸入框提供的一個新的屬性，它的功能對使用者輸入的文字內容進行拼寫和語法檢查。spellcheck屬性是一個布林值的屬性，具有true或false兩種值。但是它在書寫時有一個特殊的地方，就是必須明確宣告屬性值為true或false，書寫方法如下所示：

<!—以下兩種書寫方法正確-->
<textarea spellcheck="true" >
<input type=text spellcheck=false>
<!—以下書寫方法為錯誤-->
<textarea spellcheck >```
需要注意的是，如果元素的readOnly屬性或disabled屬性設為true，則不執行拼寫檢查。
目前除了IE之外，Firefox、Chrome、Safari、Opera等瀏覽器都對該屬性提供了支援。
圖2-3為Opera瀏覽器中spellcheck屬性的表現形式。

<div style="text-align: center"><img src="https://yqfile.alicdn.com/4cdacbcb38c7931dddea48ab21812c87bda3f826.png" width="" height="">
</div>

####2.4.5　tabindex屬性
tabindex是開發中的一個基本概念，當不斷敲擊Tab鍵讓視窗或頁面中的控制元件獲得焦點，當對視窗或頁面中的所有控制元件進行遍歷的時候，每一個控制元件的tabindex表示該控制元件是第幾個被訪問到的。
過去這個屬性在編輯網頁時是非常有用的，但如今控制元件的遍歷順序是由元素在頁面上所處位置決定的，所以就不再需要了。
但是tabindex還有另外一個作用，在預設情況下，只有連結元素與表單元素可以通過按鍵獲得焦點。如果對其他元素使用tabindex屬性後，也能讓該元素獲得焦點，那麼當指令碼中執行focus()語句的時候，就可以讓該元素獲得焦點。但這樣做會產生一個副作用：該元素也可以通過按Tab鍵獲得焦點，而這有時可能不是開發者想要的結果。


相關文章