&

javascript tabIndex屬性

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2010年12月31日 10:0 本文熱度 3699

tabIndex 的用處很簡(jiǎn)單，就是利用tab鍵遍歷頁(yè)面的表單元素和鏈接，按照tabindex的大小決定順序。雖然微不足道，但細(xì)節(jié)處見(jiàn)真功夫，這是任何一個(gè)WEB應(yīng)用應(yīng)當(dāng)具備的親用力，保證用戶在沒(méi)有鼠標(biāo)的情況下（如WAP）仍然可以正常使用。
下面的例子，為了突現(xiàn)tabIndex控制焦點(diǎn)跳轉(zhuǎn)的能力，特意把順序打亂了。請(qǐng)先選中第一個(gè)文本域，然后按tab鍵觀察。

點(diǎn)擊運(yùn)行可以看到效果:<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<FCK:meta charset="gb2312" />
<FCK:meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>tabIndex By 司徒正美</title>
<script>
window.onload = function(){
var els = document.getElementsByTagName("input");
for(var i=0,n=els.length;i<n;i++){
els[i].onfocus = function(){
this.style.cssText='background:#69C;border-color:#6cc;';
};
els[i].onblur = function(){
this.style.cssText='background:#fff;border-color:#000;';
};
}
}
</script>
</head>
<body>
<form name="nasami">
<input tabindex="1" value="第一個(gè)" type="text" >
<input tabindex="3" value="第三個(gè)" type="text" >
<input tabindex="5" value="第五個(gè)" type="text" >
<input tabindex="6" value="第六個(gè)" type="text" >
<input tabindex="4" value="第四個(gè)" type="text" >
<input tabindex="2" value="第二個(gè)" type="text" >
</form>
</body>
</html>

[Ctrl+A 全選提示:你可先修改部分代碼,再按運(yùn)行]

根據(jù)這篇文章的介紹，W3C DOM與Netscape僅是把tabIndex添加到有限的幾個(gè)元素上：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部分提供了一條鏈接，是專門說(shuō)明如何用javascript設(shè)置獲取與移除tabIndex屬性，不過(guò)已有些日子了，許多主流瀏覽器都更新了版本。因此我再測(cè)試了一次。測(cè)試程序見(jiàn)下面的運(yùn)行框：

點(diǎn)擊運(yùn)行可以看到效果:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tabIndex By 司徒正美</title>
<script type="text/<a style='color:blue;' target='_blank'>javascript</a>">
<![CDATA[//><!]]>
</script>
</head>
<body>
<input tabindex="1" value="test" type="text" id="test">
</body>
</html>

[Ctrl+A 全選提示:你可先修改部分代碼,再按運(yùn)行]

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》一文中對(duì)應(yīng)的表格相比，全部為1。

我們?cè)賮?lái)看當(dāng)表單元素沒(méi)有顯示地設(shè)置tabIndex屬性時(shí)，tabIndex是否存在，存在的話其默認(rèn)值是多少。

沒(méi)有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

如果測(cè)試對(duì)象為一個(gè)沒(méi)有顯式設(shè)置tabIndex屬性的div元素呢？在W3C標(biāo)準(zhǔn)中，只有表單元素與鏈接才能tabIndex屬性。

沒(méi)有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

我們看這篇文章，標(biāo)準(zhǔn)瀏覽器的設(shè)定其涇渭分明，-1給那些不該擁有它的元素，0是默認(rèn)分配給那些表單元素與鏈接，如果用戶定義了就返回用戶的認(rèn)定值，即便它是div。

不過(guò)在IE中，非表單元素與鏈接無(wú)論tabIndex是否定義都返回0，那么我們?cè)趺粗涝厥欠褚讯x過(guò)呢？《Getting, setting,……》給出一個(gè)非常好的辦法。利用getAttributeNode 獲取對(duì)應(yīng)的屬性節(jié)點(diǎn)。在IE中，如果是默認(rèn)屬性或已定義屬性，將會(huì)返回一個(gè)對(duì)象，標(biāo)準(zhǔn)瀏覽器則只有當(dāng)我們顯示地設(shè)置這屬性時(shí)才返回對(duì)象，其他一律為null。在IE中，如果是默認(rèn)屬性，沒(méi)有為其賦值，它有一個(gè)特殊的specified ，顯示為false，如果賦值了，則為true。標(biāo)準(zhǔn)瀏覽器沒(méi)有這東西，也不需要此東西。

再看為沒(méi)有tabIndex屬性元素賦值的情況el.tabIndex=value就不用說(shuō)了，肯定行得通，dom 0年代的實(shí)現(xiàn)。如果一個(gè)元素用setAttribute("tabIndex",3)賦值，注意是大寫，那么無(wú)論是el.tabIndex還是el.getAttribute("tabIndex")還是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)賦值,IE則全為0，標(biāo)準(zhǔn)瀏覽器則全為3，因此還是用前者吧。

沒(méi)有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")測(cè)試。誰(shuí)都沒(méi)有把握移除干凈，從目前的情況來(lái)看，只有選擇el.removeAttribute("tabIndex")。

tabIndex為3的input元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.removeAttribute("tabIndex") 0,0,0 0,0,0 0,0,0 0,null,null 0,null,null 3,null,null 3,null,null
el.removeAttribute("tabindex") 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

該文章在 2010/12/31 10:00:15 編輯過(guò)

關(guān)鍵字查詢

javascript

java

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。