jQuery / Javascript通过页面选项卡将焦点传递给下一个元素

时间:2010-01-28 16:30:26

标签: javascript jquery accessibility

我正在使用jQuery构建一个'标签输入'插件,我遇到了一个小绊脚石。

我在表单中输入文本后添加一个按钮,并使用javascript为按钮提供功能。单击该按钮(或在输入中按下返回)时,输入的值将添加到标签列表中。然后清除输入并重新聚焦。

当我通过界面选项卡时,我的问题出现了,当你选中它时输入获得焦点但是我想要取消此行为。我可以模糊按钮,但我宁愿将按钮传递焦点到下一个可聚焦元素。

e.g。我的表单中有三个输入:text-input-1,button,text-input-2。当text-input-1被聚焦并按Tab键时,我希望焦点跳转到text-input-2而不是按钮。

可以这样做吗?提前谢谢。

3 个答案:

答案 0 :(得分:3)

这在IE中很容易,它接受tabIndex属性的负整数,它将从Tab键顺序中删除它:

<input type="button" tabindex="-1" value="Can't tab to me!" />

这不是HTML 4.01 specification for tabindex的一部分,它只允许0到32767之间的整数。但是, HTML 5 drafts中指定并且在大多数主要支持浏览器。

在不支持它的浏览器中我能想到的最简单的方法是等待输入的onkeydown事件并检查tab键。如果按下Tab键,则禁用该按钮并设置间隔长度为0的超时以再次启用该按钮。

答案 1 :(得分:1)

更改选项卡索引顺序,将text-input-1 tabindex设置为100,text-input-2设置为200,对于按钮,任何大于200的数字。它应该可以解决问题。

答案 2 :(得分:0)

啊,我在Teja(+1)的帮助下回答了我自己的问题。

我需要做的就是在按钮上应用否定标签索引!