Javascript中tabIndex属性的应用

最新推荐文章于 2023-01-26 17:04:10 发布

dq201

最新推荐文章于 2023-01-26 17:04:10 发布

阅读量624

点赞数

分类专栏： JAVASCRIPT 文章标签： JavaScript WAP Web HTML ViewUI

本文链接：https://blog.youkuaiyun.com/dq201/article/details/83738488

版权

JAVASCRIPT 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了tabindex属性的作用及使用方法，包括如何通过tabindex控制页面元素的遍历顺序，以及如何禁用特定表单元素的Tab键导航。还列举了不同浏览器对tabIndex属性的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b][size=large]tabindex 属性 -- 代表使用"Tab"键的遍历顺序[/size][/b]
[i]
tabIndex 的用处很简单，就是利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定遍历时的顺序。虽然微不足道，但这是任何一个WEB应用应当具备的亲用力，保证用户在没有鼠标的情况下（如WAP）仍然可以正常使用。
下面的例子，为了突现tabIndex控制焦点跳转的能力，特意把顺序打乱了。请先选中第一个文本域，然后按tab键观察效果。[/i]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>javascript tabIndex属性</TITLE>
  </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>

[i]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。[/i]

[size=large][b]怎样禁用TAB键？
比如让<input id='text1' type='text'>表单元素禁用TAB[/b][/size]

方法一：设置属性tabindex=-1就可以了。

方法二：<input   id='text1'   type='text'   onkeydown="if(event.keyCode==9){event.returnValue=false;}" />