首頁 web前端 html教學 html教學:用tabIndex輕鬆實現網頁導航

html教學:用tabIndex輕鬆實現網頁導航

Dec 20, 2016 pm 02:26 PM
html 網頁導航

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

  透過[Tab]鍵存取元素


  HTML DOM tabIndex特性允許你設定或傳回一個HTML元素的tab鍵順序。 IE 
4.0最先支援此特性。起初,只有真正可透過[Tab]鍵存取的元素受到支持,如輸入欄、連結等。如今,所有的網頁瀏覽器,以及頁面上顯示的所有元素都支援此特性。在應用它之前,你可以雙擊HTML規格保證某個元素支援此特性。


  tabIndex特性


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


  


  如果最初選擇了[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]鍵存取的項目。


 以上就是html教學:用tabIndex輕鬆實現網頁導航 的內容,更多相關內容請關注PHP中文網(www.php.cn)! 


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles