javascript
javascript tabIndex属性
tabIndex 的用處很簡單，就是利用tab鍵遍歷頁面的表單元素和鏈接，按照tabindex的大小決定順序。雖然微不足道，但細節處見真功夫，這是任何一個WEB應用應當具備的親用力，保證用戶在沒有鼠標的情況下（如WAP）仍然可以正常使用。
下面的例子，為了突現tabIndex控制焦點跳轉的能力，特意把順序打亂了。請先選中第一個文本域，然后按tab鍵觀察。
?
點擊運行可以看到效果:<!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="第一個" type="text" >
<input tabindex="3" value="第三個" type="text" >
<input tabindex="5" value="第五個" type="text" >
<input tabindex="6" value="第六個" type="text" >
<input tabindex="4" value="第四個" type="text" >
<input tabindex="2" value="第二個" type="text" >
</form>
</body>
</html>
? [Ctrl+A 全選 提示:你可先修改部分代碼,再按運行]
?
根據這篇文章的介紹，W3C DOM與Netscape僅是把tabIndex添加到有限的幾個元素上：a, area, button, input, object, select, textarea，也就是所謂的表單元素與鏈接。IE4則比它多以下元素： applet, body, div, embed, isindex, marquee, span, table, 與td，到了IE5，幾乎所有能渲染的元素都擁有這屬性（像br元素就是不能渲染的）。tabIndex的值，根據W3C的規定，范圍在0到 32767。
在jQuery的源碼中，講到attr部分提供了一條鏈接，是專門說明如何用javascript設置獲取與移除tabIndex屬性，不過已有些日子了，許多主流瀏覽器都更新了版本。因此我再測試了一次。測試程序見下面的運行框：
?
點擊運行可以看到效果:<?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;' href='http://www.waweb.cn/article/slist-1-1.htm' target='_blank'>javascript</a>">
<!--//--><![CDATA[//><!--
window.onload = function(){
var el = document.getElementById("test");
alert(el.tabIndex)
alert(el.getAttribute("tabindex"))
alert(el.getAttribute("tabIndex"))
}
//--><!]]>
</script>
</head>
<body>
<input tabindex="1" value="test" type="text" id="test">
</body>
</html>
? [Ctrl+A 全選 提示:你可先修改部分代碼,再按運行]
?
?
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》一文中對應的表格相比，全部為1。
我們再來看當表單元素沒有顯示地設置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
如果測試對象為一個沒有顯式設置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
我們看這篇文章，標準瀏覽器的設定其涇渭分明，-1給那些不該擁有它的元素，0是默認分配給那些表單元素與鏈接，如果用戶定義了就返回用戶的認定值，即便它是div。
不過在IE中，非表單元素與鏈接無論tabIndex是否定義都返回0，那么我們怎么知道元素是否已定義過呢？《Getting, setting,……》給出一個非常好的辦法。利用getAttributeNode 獲取對應的屬性節點。在IE中，如果是默認屬性或已定義屬性，將會返回一個對象，標準瀏覽器則只有當我們顯示地設置這屬性時才返回對象，其他一律為null。在IE中，如果是默認屬性，沒有為其賦值，它有一個特殊的specified ，顯示為false，如果賦值了，則為true。標準瀏覽器沒有這東西，也不需要此東西。
再看為沒有tabIndex屬性元素賦值的情況el.tabIndex=value就不用說了，肯定行得通，dom 0年代的實現。如果一個元素用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
最后移除屬性的情況，移除結果后分別用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")測試。誰都沒有把握移除干凈，從目前的情況來看，只有選擇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
文章源自Web技術之家
?
本文來自:Web技術之家(http://www.waweb.cn/) 詳細出處參考：http://waweb.cn/article/26675.htm
轉載于:https://www.cnblogs.com/winlj/archive/2009/12/09/1620535.html
總結
以上是生活随笔為你收集整理的javascript tabIndex属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国城市统计年鉴下载
- 下一篇： 黑马-程序员C#泛型简介