0.1捕鱼送6元苹果

書名： HTML5與CSS3權(quán)威指南（第2版·上冊(cè)）
作者名：陸凌牛
本章字?jǐn)?shù)： 597字
更新時(shí)間： 2018-12-31 22:03:29

2.4 全局屬性

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

2.4.1 contentEditable屬性

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

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

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

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

代碼清單2-2 contentEditable屬性示例

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>contentEditalbe屬性示例</title>
</head>
<h2>可編輯列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>

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

圖2-2 可編輯列表示例

在編輯完元素中的內(nèi)容后，如果想要保存其中內(nèi)容，只能把該元素的innerHTML發(fā)送到服務(wù)器端進(jìn)行保存，因?yàn)楦淖冊(cè)貎?nèi)容后該元素的innerHTML內(nèi)容也會(huì)隨之改變，目前還沒有特別的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.4.2 designMode屬性

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

document.designMode="on"

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

IE8：出于安全考慮，不允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。
IE9：允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。
Chrome 3和Safari：使用內(nèi)嵌frame的方式,該內(nèi)嵌frame是可編輯的。
Firefox和Opera：允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。

2.4.3 hidden屬性

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

2.4.4 spellcheck屬性

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

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

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

目前除了IE之外，F(xiàn)irefox、Chrome、Safari、Opera等瀏覽器都對(duì)該屬性提供了支持。圖2-3為Opera瀏覽器中spellcheck屬性的表現(xiàn)形式。

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

2.4.5 tabindex屬性

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

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

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

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

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