javascript tabIndex属性

tabIndex 的用处很简单，就是利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定顺序。虽然微不足道，但细节处见真功夫，这是任何一个WEB应用应当具备的亲用力，保证用户在没有鼠标的情况下（如WAP）仍然可以正常使用。

下面的例子，为了突现tabIndex控制焦点跳转的能力，特意把顺序打乱了。请先选中第一个文本域，然后按tab键观察。

tabIndex By 司徒正美

window.onload = function(){
var els = document.getElementsByTagName("input");
for(var i=0,n=els.length;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

根据这篇文章的介绍，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属性，不过已有些日子了，许多主流浏览器都更新了版本。因此我再测试了一次。测试程序见下面的运行框：

tabIndex By 司徒正美

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]






































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

赞 (0)

相关推荐

  • javascript删除Table中的一行的脚本代码

    javascript删除talbe中的一行 function Goto(){} function deleteCurrentRow(obj){ var tr=obj.parentNode.parentNode; var tbody=tr.parentNode; tbody.removeChild(tr); } 流程名称 表单名称 上传附件 操作 请假单1 请假单 不允许 删除 请假单2 请假单 不允许 删除 请假单3 请假单 不允许 删除 请假单4 请假单 不允许 删除 [Ctrl+A 全选 注

  • 基于JavaScript实现移动端TAB触屏切换效果

    基于JavaScript实现移动端TAB触屏切换效果

    展示效果图如下所示: 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. HTML 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

    insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行. 语法 tableObject.insertRow(index) 返回值 返回一个 TableRow,表示新插入的行. 说明 该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置. 新行将被插入 index 所在行之前.若 index 等于表中的行数,则新行将被附加到表的末尾. 如果表是空的,则新行将被插入到一个新的 <tbody>

  • javascript实现tab切换的四种方法

    javascript实现tab切换的四种方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:

  • javascript hashtable实现代码

    复制代码 代码如下: var arr = new Array(); arr['item1'] = 'the value of item 1 '; arr['item2'] = 'the value of item 2 '; alert(arr['item1']); alert(arr['item2']); 但上述功能,不符我们的实际要求,另外查询遍历也不方便,我们需要在Array的基础上进行扩展, 下面我们可以用js中的数组来实现类似的hashtable的功能, 复制代码 代码如下: funct

  • 一实用的实现table排序的Javascript类库

    一个Javascript 的类库,用于table内容排序.使用很方便,不用每次都去调用数据库了. 特别适合多表查询的排序.加上<tbody>的style.display 切换,也可以实现分页. 效果演示 用法: 1.添加JS <SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT> 2.添加TABLE,注意的是:一定要有ID,class为"sortable&q

  • javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

    从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

  • javascript 哈希表(hashtable)的简单实现

    首先简单的介绍关于属性的一些方法: 属性的枚举: for/in循环是遍历对象属性的方法.如 复制代码 代码如下: var obj = { name : 'obj1', age : 20, height : '176cm' } var str = ''; for(var name in obj) { str += name + ':' + obj[name] + '\n'; } alert(str); 输出为:name:obj1 age:20 height:176cm 检查属性是否存在: in运算

  • javascript 通用滑动门tab类

    滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容

  • javascript 动态table添加colspan\rowspan 参数的方法

    解决方法:取得表对象,并取得他下面对应的行对象下的某个元素,这里如document.tableId.rows[i].cells[j]即取得表下第i行下的第j个元素,然后document.tableId.rows[i].cells[j].colspan=n即可. eg: dempTHFirst为要增加行或列属性的元素. demoThFirst.colSpan=3;

  • JavaScript Table行定位效果

    JavaScript Table行定位效果

    上次做table排序对table有了一些了解,这次更是深入了解了一番,发现table原来是这么不简单. 还不清楚这个效果叫什么,就叫行定位吧,本来想把列定位也做出来,但暂时还没这个需求,等以后有时间再弄吧. 程序原理 一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位. 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: 1 2 3 4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 给tr设置relative后就能相对table定位

  • javascript 定时自动切换的选项卡Tab

    这里要注意,用于产生changeTabInterval的随机数,防止页面上TabPane过多,如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果,不美观. 自动切换Tab选项卡 function randint(m,n)//产生m-n之间的随机整数 { return Math.random()*(n-m)+m; } function IfNull(a,dv) { return typeof(a) =="undefined"?dv:a; } var TabP

  • JavaScript获取table中某一列的值的方法

    JavaScript获取table中某一列的值的方法

    1.实现源码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • javascript实现tab切换的两个实例

    javascript实现tab切换的两个实例

    上一篇<javascript实现tab切换的四种方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿"中国人民大学"官网的tab切换,背景是图片,效果图如下: 鼠标移到新闻时的效果   鼠标移到公告时的效果   鼠标移到交流时的效果   学术.交流和文体的内容为空,我没有写.完整代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=

  • js(JavaScript)实现TAB标签切换效果的简单实例

    js(JavaScript)实现TAB标签切换效果的简单实例

    一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w

  • javascript 回车替换成TAB的脚本

    //判断键值 var ie =navigator.appName=="Microsoft Internet Explorer"?true:false; function keyDown(e) { if(!ie) { var nkey=e.which; var iekey='现在是ns浏览器'; var realkey=String.fromCharCode(e.which); } if(ie) { var iekey=event.keyCode; var nkey='现在是ie浏览器'

  • 麦鸡的TAB切换功能结合了javascript和css

    麦鸡的TAB切换功能结合了javascript和css

    这类型东西网上多的是,但朋友说我的程序程序理念好(嘻-),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了 做个滑动门,需要一个图片 CSS 复制代码 代码如下: .nav{position:relative}  .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2}  .nav dt a{color:#555; text-decoration:none}  .

随机推荐