javascript tabIndex屬性
下面的例子,為了突現(xiàn)tabIndex控制焦點跳轉(zhuǎn)的能力,特意把順序打亂了。請先選中第一個文本域,然后按tab鍵觀察。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
根據(jù)這篇文章的介紹,W3C DOM與Netscape僅是把tabIndex添加到有限的幾個元素上:a, area, button, input, object, select, textarea,也就是所謂的表單元素與鏈接。IE4則比它多以下元素: applet, body, div, embed, isindex, marquee, span, table, 與td,到了IE5,幾乎所有能渲染的元素都擁有這屬性(像br元素就是不能渲染的)。tabIndex的值,根據(jù)W3C的規(guī)定,范圍在0到 32767。
在jQuery的源碼中,講到attr部分提供了一條鏈接,是專門說明如何用javascript設(shè)置獲取與移除tabIndex屬性,不過已有些日子了,許多主流瀏覽器都更新了版本。因此我再測試了一次。測試程序見下面的運行框:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
| tabindex為1的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| el.getAttribute("tabindex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| el.getAttribute("tabIndex") | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
此表格與《Getting, setting, and removing tabindex values with JavaScript》一文中對應(yīng)的表格相比,全部為1。
我們再來看當表單元素沒有顯示地設(shè)置tabIndex屬性時,tabIndex是否存在,存在的話其默認值是多少。
| 沒有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
| el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
如果測試對象為一個沒有顯式設(shè)置tabIndex屬性的div元素呢?在W3C標準中,只有表單元素與鏈接才能tabIndex屬性。
| 沒有tabIndex的div元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex | 0 | 0 | 0 | -1 | -1 | -1 | -1 |
| el.getAttribute("tabindex") | 0 | 0 | 0 | null | null | null | null |
| el.getAttribute("tabIndex") | 0 | 0 | 0 | null | null | null | null |
我們看這篇文章,標準瀏覽器的設(shè)定其涇渭分明,-1給那些不該擁有它的元素,0是默認分配給那些表單元素與鏈接,如果用戶定義了就返回用戶的認定值,即便它是div。
不過在IE中,非表單元素與鏈接無論tabIndex是否定義都返回0,那么我們怎么知道元素是否已定義過呢?《Getting, setting,……》給出一個非常好的辦法。利用getAttributeNode 獲取對應(yīng)的屬性節(jié)點。在IE中,如果是默認屬性或已定義屬性,將會返回一個對象,標準瀏覽器則只有當我們顯示地設(shè)置這屬性時才返回對象,其他一律為null。在IE中,如果是默認屬性,沒有為其賦值,它有一個特殊的specified ,顯示為false,如果賦值了,則為true。標準瀏覽器沒有這東西,也不需要此東西。
再看為沒有tabIndex屬性元素賦值的情況el.tabIndex=value就不用說了,肯定行得通,dom 0年代的實現(xiàn)。如果一個元素用setAttribute("tabIndex",3)賦值,注意是大寫,那么無論是el.tabIndex還是el.getAttribute("tabIndex")還是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)賦值,IE則全為0,標準瀏覽器則全為3,因此還是用前者吧。
| 沒有tabIndex的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.tabIndex=3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| el.setAttribute("tabIndex",3) | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| el.setAttribute("tabindex",3) | 0 | 0 | 0 | 3 | 3 | 3 | 3 |
最后移除屬性的情況,移除結(jié)果后分別用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")測試。誰都沒有把握移除干凈,從目前的情況來看,只有選擇el.removeAttribute
| tabIndex為3的input元素 | IE6 | IE7 | IE8 | FF3.55 | opeta10.10 | Safari4.0 | chrome4.02 |
|---|---|---|---|---|---|---|---|
| el.removeAttribute |
0,0,0 | 0,0,0 | 0,0,0 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
| el.removeAttribute |
3,3,3 | 3,3,3 | 3,3,3 | 0,null,null | 0,null,null | 3,null,null | 3,null,null |
| delete el.tabIndex | errer | errer | errer | 3,3,3 | 0,null,null | 3,3,3 | undefined,null,null |
- 一實用的實現(xiàn)table排序的Javascript類庫
- 麥雞的TAB切換功能結(jié)合了javascript和css
- javascript 通用滑動門tab類
- javascript刪除Table中的一行的腳本代碼
- javascript 回車替換成TAB的腳本
- javascript 表格排序和表頭浮動效果(擴展SortTable)
- JavaScript Table行定位效果
- javascript 動態(tài)table添加colspan\rowspan 參數(shù)的方法
- javascript hashtable實現(xiàn)代碼
- javascript 定時自動切換的選項卡Tab
- javascript 移動鼠標得到單元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript 哈希表(hashtable)的簡單實現(xiàn)
- javascript實現(xiàn)tabs選項卡切換效果(自寫原生js)
- javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法詳解)
- js(JavaScript)實現(xiàn)TAB標簽切換效果的簡單實例
- JavaScript獲取table中某一列的值的方法
- 基于JavaScript實現(xiàn)移動端TAB觸屏切換效果
- javascript實現(xiàn)tab切換的四種方法
- javascript實現(xiàn)tab切換的兩個實例
相關(guān)文章
JavaScript原生數(shù)組函數(shù)實例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實例匯總,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
xmlplus組件設(shè)計系列之圖標(ICON)(1)
這篇文章主要為大家詳細介紹了xmlplus組件設(shè)計系列之圖標ICON的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
Add a Table to a Word Document
Add a Table to a Word Document...2007-06-06
Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解
這篇文章主要為大家介紹了Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化
這篇文章主要為大家介紹了JavaScript實現(xiàn)echarts水球圖百分比展示大屏可視化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10

