網(wǎng)頁設(shè)計 TabIndex元素
發(fā)布時間：2009-12-13 22:16:58 作者：佚名 
我要評論
我要評論TabIndex就是按Tab鍵有順序的獲取定義過的TabIndex元素設(shè)置在各個元素之間的焦點。
TabIndex就是按Tab鍵有順序的獲取定義過的TabIndex元素設(shè)置在各個元素之間的焦點。
做過表單或者填寫過表單的人都會發(fā)現(xiàn)，使用Tab鍵可以逐一獲得每個input的焦點。這個東東其實也是可以修改的，比如不想被獲取，或者改變被獲取的順序。
在填寫表單的時候（注冊登錄或其它），有很多用戶都是不通過鼠標，而直接按Tab鍵跳到下一個文本框的，等到所有的東東都填好，然后是提交，這是一個非常好和方便的功能。我個人的習慣是，在填寫完所有的東西時，提交一般都是用鼠標去點擊提交按鈕的，而且不希望Tab會使焦點跳到button上面，但我很少發(fā)現(xiàn)有使用Tab不會跳到button上的，不知道是不是個人習慣太BT了-_-!!!
如果不想某個東東被獲取焦點，可以tabindex=-x，讓tabindex的值為負，這樣的話Tab就會直接跳過。
下面用一個簡單的表單做例：
提示：您可以先修改部分代碼再運行
<form method="post" action="#">
<p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p>
<p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p>
<p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p>
<p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p>
</form>
使用Tab鍵，獲取焦點的順序就是通過tabindex的值大小來排序的。上面的例子依次獲得焦點的是t1, t2, t3, 到t4的時候，由于TabIndex的值為-1，所以t4不會獲得焦點，而是直接跳到下一個獲取焦點的元素上。
t1, t2, t3, t4的TabIndex值可以根據(jù)實際需求任意更改，Tab焦點根據(jù)值由小到大被獲得。
TabIndex就是用來做這些滴。。。
做過表單或者填寫過表單的人都會發(fā)現(xiàn)，使用Tab鍵可以逐一獲得每個input的焦點。這個東東其實也是可以修改的，比如不想被獲取，或者改變被獲取的順序。
在填寫表單的時候（注冊登錄或其它），有很多用戶都是不通過鼠標，而直接按Tab鍵跳到下一個文本框的，等到所有的東東都填好，然后是提交，這是一個非常好和方便的功能。我個人的習慣是，在填寫完所有的東西時，提交一般都是用鼠標去點擊提交按鈕的，而且不希望Tab會使焦點跳到button上面，但我很少發(fā)現(xiàn)有使用Tab不會跳到button上的，不知道是不是個人習慣太BT了-_-!!!
如果不想某個東東被獲取焦點，可以tabindex=-x，讓tabindex的值為負，這樣的話Tab就會直接跳過。
下面用一個簡單的表單做例：
提示：您可以先修改部分代碼再運行
復(fù)制代碼
代碼如下:<form method="post" action="#">
<p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p>
<p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p>
<p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p>
<p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p>
</form>
使用Tab鍵，獲取焦點的順序就是通過tabindex的值大小來排序的。上面的例子依次獲得焦點的是t1, t2, t3, 到t4的時候，由于TabIndex的值為-1，所以t4不會獲得焦點，而是直接跳到下一個獲取焦點的元素上。
t1, t2, t3, t4的TabIndex值可以根據(jù)實際需求任意更改，Tab焦點根據(jù)值由小到大被獲得。
TabIndex就是用來做這些滴。。。
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關(guān)標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法：通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點，感興2025-02-24
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨特的效果，例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
在Html中,a標簽?zāi)J的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼2024-09-25- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保2024-09-25
本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎(chǔ)的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽2024-09-19- Canvas 提供了一套強大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用，這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點總結(jié)2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習2024-03-06
本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習2024-02-22
在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需2024-02-02
