DIV CSS 佈局教程網

最近，當我在一個網站上輸入表格數據時，我填寫了一欄，並點擊[Tab]鍵移到下一欄；當我抬頭時，我驚奇的發現光標跳到頁面下方的另一欄中。我用鼠標將光標移到正確的文本欄中，但不久[Tab]鍵又再次出現問題。這一情形使我想了解一下頁面設計，以及tabIndex屬性如何通過鍵盤幫助導航。

通過[Tab]鍵訪問元素

HTML DOM tabIndex特性允許你設置或返回一個HTML元素的tab鍵順序。IE 4.0最先支持此特性。起初，只有真正可通過[Tab]鍵訪問的元素受到支持，如輸入欄、鏈接等。如今，所有的網絡浏覽器，以及頁面上顯示的所有元素都支持此特性。在應用它之前，你可以雙擊HTML規范保證某個元素支持此特性。

tabIndex特性

應用tabIndex特性是一個簡單而又直接的過程。例如，下面的HTML源代碼將tabIndex值1賦值給輸入欄，它是tab順序的第一欄：

<input id="idfname" name="firstName" tabindex="1" />

如果最初選擇了[Tab]鍵，帶這個輸入欄的網頁會將光標移動到 firstName欄。

在給tabIndex特性賦值時，要留意幾個問題。下面是幾個賦值規則：

• 帶0值tabIndex的元素根據源代碼（或默認頁面行為）進行排序。
• 大於0的tabIndex值設定其tab順序。所有帶正tabIndex值的元素出現在所有帶0 tabIndex值的元素之前。
• 如果你犯了一個錯誤，把同一個tabIndex賦予給多個元素，像其它元素一樣，它們會以一個0值tabIndex進行處理。
• 將tabIndex賦值為-1，則在使用[Tab]鍵時，此元素被忽略。注意：如果使用-1值時，onfocus與onblur事件仍被啟動。
• tabIndex的值可為0至32767之間的任意數字。

列表A中的樣本HTML代碼將一個tabIndex值賦予給頁面中的每一個項目。輸入欄與DIV標簽包含tabIndex特性，允許用戶用鍵盤仔細閱讀頁面元素。（DIV標簽並不提供與獲得焦點有關的太多信息，但我想用非輸入元素說明tabIndex的應用情況。）值為-1的按鈕被賦值，在應用[Tab]鍵時，它們即被忽略。

當輸入元素充滿（達到最大長度）時，你可以增加一小段JavaScript腳本來實現自動定位功能。這是一個基本的函數，我們來看看腳本如何實現其功能：

function checkLen(x,y) {

if (y.length==x.maxLength) {

var next=x.tabIndex

if (next < document.getElementById("frmTest").length) {

document.getElementById("frmTest").elements[next-1].focus()

} } }

該函數接受兩個變量。第一個變量為輸入欄，第二個變量包含該欄的值。並將欄的長度與欄的可接受最大長度相比較。如果它們相等（即該欄是充滿的），則從欄中讀取tabIndex的值；如果該值小於最大長度，則焦點被移動下一欄中。

此函數為每一欄的onkeyup事件賦值，因此每次在欄中輸入一個值，以檢驗其是否達到最大長度時，都要調用該函數。如果達到最大值，則光標按tab順序移動到下一欄中。列表B中的源代碼將此函數添加到上面的例子中。

提高訪問能力

為元素指定tabIndex可幫助經常使用鍵盤的用戶更為方便地接觸網絡界面；非標准用戶，如PDA、移動電話以及殘疾人使用的屏幕閱讀器也從中受益。任何擴充應用軟件功能的事件都是有益的。

小事一樁

你可能要花許多時間來設計網絡窗體，使其具有視覺吸引力，並能被後端服務器組件正確處理。但是，你可能忽略了要用非標准技術或浏覽器對其進行測試。典型的例子就是放棄鼠標，而依靠鍵盤來導航窗體。HTML標准包含tabIndex特性，它允許你控制通過[Tab]鍵訪問的項目。

Tony Patton擁有豐富的Java、VB、Lotus及XML方面的知識，是一個專業的應用程序開發人員。