pg冰火双娇大奖视频

書名： HTML 5與CSS 3權(quán)威指南（第4版·上冊）
作者名：陸凌牛
本章字?jǐn)?shù)： 1748字
更新時間： 2019-03-04 18:28:56

2.4　全局屬性

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

2.4.1　contentEditable屬性

contentEditable是由微軟開發(fā)的，被其他瀏覽器反編譯并投入應(yīng)用的一個全局屬性。該屬性的主要功能是允許用戶編輯元素中的內(nèi)容，所以該元素必須是可以獲得鼠標(biāo)焦點的元素，而且在點擊鼠標(biāo)后要向用戶提供一個插入符號，提示用戶該元素中的內(nèi)容允許編輯。contentEditable屬性是一個布爾值屬性，可以被指定為true或false。

除此之外，該屬性還有個隱藏的inherit（繼承）狀態(tài)，當(dāng)屬性值為true時，元素被指定為允許編輯；當(dāng)屬性值為false時，元素被指定為不允許編輯；當(dāng)未指定true或false時，則由inherit狀態(tài)來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。

另外，除了contentEditable屬性外，元素還具有一個isContentEditable屬性，當(dāng)元素可編輯時，該屬性值為true；當(dāng)元素不可編輯時，該屬性值為false。

代碼清單2-2中給出了一個使用contentEditable屬性的示例，當(dāng)列表元素被加上contentEditable屬性后，該元素就變成可編輯的了，讀者可自行在瀏覽器中對該示例進(jìn)行試驗。

代碼清單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>

這段代碼運行后的結(jié)果如圖2-2所示。

在編輯完元素中的內(nèi)容后，要想保存其中內(nèi)容，只能把該元素的innerHTML發(fā)送到服務(wù)器端進(jìn)行保存，因為改變元素內(nèi)容后該元素的innerHTML內(nèi)容也會隨之改變，目前還沒有特別的API來保存編輯后元素中的內(nèi)容。

最后，在這里列舉一下支持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-2　可編輯列表示例

2.4.2　designMode屬性

designMode屬性用來指定整個頁面是否可編輯，當(dāng)頁面可編輯時，頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性只能在JavaScript腳本中被編輯修改。該屬性有兩個值——“on”與“off”。當(dāng)該屬性值被指定為“on”時，頁面可編輯；當(dāng)該屬性值被指定為“off”時，頁面不可編輯。使用JavaScript腳本來指定designMode屬性的方法如下所示：

document.designMode="on"

針對designMode屬性，各瀏覽器的支持情況也各不相同：

·IE 8：出于安全考慮，不允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。

·IE 9：允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。

·Chrome 3和Safari：使用內(nèi)嵌frame的方式，該內(nèi)嵌frame是可編輯的。

·Firefox和Opera：允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。

2.4.3　hidden屬性

在HTML 5中，所有的元素都允許使用一個hidden屬性。該屬性類似于input元素中的hidden元素，功能是通知瀏覽器不渲染該元素，使該元素處于不可見狀態(tài)。但是元素中的內(nèi)容還是被瀏覽器創(chuàng)建的，也就是說頁面裝載后允許使用JavaScript腳本將該屬性取消，取消后該元素變?yōu)榭梢姞顟B(tài)，同時元素中的內(nèi)容也即時顯示出來。hidden屬性是一個布爾值的屬性，當(dāng)設(shè)為true時，元素處于不可見狀態(tài)；當(dāng)設(shè)為false時，元素處于可見狀態(tài)。

2.4.4　spellcheck屬性

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

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

需要注意的是，如果元素的readOnly屬性或disabled屬性設(shè)為true，則不執(zhí)行拼寫檢查。

目前除了IE之外，F(xiàn)irefox、Chrome、Safari、Opera等瀏覽器都對該屬性提供了支持。

圖2-3為Opera瀏覽器中spellcheck屬性的表現(xiàn)形式。

圖2-3　Operal瀏覽器中spellcheck的屬性示例

2.4.5　tabindex屬性

tabindex是開發(fā)中的一個基本概念，當(dāng)不斷敲擊Tab鍵讓窗口或頁面中的控件獲得焦點，當(dāng)對窗口或頁面中的所有控件進(jìn)行遍歷的時候，每一個控件的tabindex表示該控件是第幾個被訪問到的。

過去這個屬性在編輯網(wǎng)頁時是非常有用的，但如今控件的遍歷順序是由元素在頁面上所處位置決定的，所以就不再需要了。

但是tabindex還有另外一個作用，在默認(rèn)情況下，只有鏈接元素與表單元素可以通過按鍵獲得焦點。如果對其他元素使用tabindex屬性后，也能讓該元素獲得焦點，那么當(dāng)腳本中執(zhí)行focus()語句的時候，就可以讓該元素獲得焦點。但這樣做會產(chǎn)生一個副作用：該元素也可以通過按Tab鍵獲得焦點，而這有時可能不是開發(fā)者想要的結(jié)果。

把元素的tabindex值設(shè)為負(fù)數(shù)（通常為-1）后就可以解決這個問題。tabindex值為負(fù)數(shù)后，仍然可以通過編程的方式讓元素獲得焦點，但按下Tab鍵時該元素就不能獲得焦點，這在復(fù)雜的頁面中或復(fù)雜的Web應(yīng)用程序中是十分有用的。在HTML 4中，-1是一個無用的屬性值，但到了HTML 5中，通過巧妙運用可以讓該屬性值獲得極大應(yīng)用。

官术网_书友最值得收藏!

HTML 5與CSS 3權(quán)威指南（第4版·上冊）

2.4 全局屬性

2.4.1 contentEditable屬性

2.4.2 designMode屬性

2.4.3 hidden屬性

2.4.4 spellcheck屬性