设置按钮的tabindex无效。

Question

设置按钮的tabindex无效。

8

我有一个表单上的几个控件。我必须按照不符合它们在HTML中创建顺序的顺序设置tabIndex。在最后有一个按钮，但是这个元素的tabIndex没有被设置（它从未获得焦点）。

<button id="btnSave" tabindex = "86" title='click here'>Submit Here</button>

可能的原因是什么？非常感谢您的帮助。

- Premanshu

2

tabindex="90"，不要有空格，始终使用双引号而非单引号。 - user652649

事实上，尽管我的问题被投票下降，但我想重申，在提出这个问题之前，我进行了彻底的检查，以确保其在SO论坛上。 - Premanshu

1

它在我的电脑上可以运行(http://jsfiddle.net/e89wK/)；你似乎已经将测试用例缩减到无法再演示问题的程度。请编辑你的代码，包含足够的代码来重现问题（如果可能，请提供一个链接到实时示例的支持），并描述你正在测试的环境（浏览器、操作系统等）。 - Quentin

@wes - 空格是允许的。可以使用任何类型的引号。 - Quentin

@Arsen7 — 虽然有些浏览器对按钮的默认类型有点奇怪，但这不会影响它是否可以聚焦。 - Quentin

@Quentin：看起来由于按钮被定制了，控件没有在其上设置。该按钮被包装在table->tr->td结构中。而且焦点不应该围绕这些项目(table、span等)。虽然你的fiddle反映了明显的行为。我在Windows7上使用Chrome、Mozilla和IE协调工作...再次感谢。 - Premanshu

3个回答

4

如果只在元素上设置tabindex属性，那么该元素将成为导航中的第一个，这意味着您不能直接从最后一个输入字段进入它（但只能通过浏览器自己的用户界面中的一些依赖于浏览器的项目，如搜索框和地址框）。请参阅HTML 4.01规范中有关tabindex的说明。

如果您还在其他字段上设置了tabindex属性，请发布一个演示以展示其行为 - 在几个浏览器上进行简单测试时，当在所有字段上设置tabindex时，它可以正常工作。

- Jukka K. Korpela

那么代码怎么样？最好是一个紧凑、最小化的版本，仍然能够展示问题。在另一条评论中，你说按钮使用了jQuery。很可能问题与脚本有关。如果在浏览器中禁用JavaScript，页面会如何表现？ - Jukka K. Korpela

实际上，整个项目都使用了jQuery，因此禁用JavaScript对我的项目来说是一场灾难。除了一个空白屏幕外，什么也不会出现。我已经在[http://jsfiddle.net/KQt5P/5/]上设置了示例。按钮的代码是我从Chrome Firebug中获取的... - Premanshu

Fiddle中的所有项目都可以通过Tab键访问，除了“应用更改”部分。这是问题吗？“应用更改”只是<td>元素内的文本，因此无法聚焦。如果我在其上设置tabindex，它就变得可聚焦（可获取焦点）-现代浏览器也允许您对普通元素执行此操作。 - Jukka K. Korpela

是的，那就是问题所在……文本位于我创建的按钮之上。一旦在该td上设置了tabindex，它就可以成为可制表的。但是，由于对按钮进行了自定义，浏览器生成的按钮代码与我编写的代码不同。否则，通过在tbody上设置tabindex，我将实现所需结果。唉！ - Premanshu

-2

尝试：

 <input type="button" value="Sumit here" tabindex="90" />

请注意，您的索引将从其父级开始计数，从零开始！在 HTML 中，索引 90 太大了。

- S.A.Parkhid

@Parkhid也没有帮助，...是的，实际上我已经设置了从50开始的索引，并且为下一个控件递增+5。对于按钮，我现在将其设置为86，因为我的最后一个控件是85。即使这样也没有任何帮助。其他控件是文本框和下拉框。 - Premanshu

这是使用jQuery创建的自定义按钮（不是常规HTML按钮）。这可能是导致此不良行为的原因吗？ - Premanshu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ganesa Vijayakumar · Accepted Answer

Tabindex最佳实践

通常来说，我建议不要给任何字段/组件设置递增的tabindex值。因为如果我们遵循这个规则，那么对于网页中的任何字段/组件，我们需要维护相同的tabindex递增值，而且我们通常会根据某些条件显示/隐藏字段/组件，这样的情况下tab index将无法保持一致。

我强烈建议的最佳实践是，我们不应该使用大于0的Tabindex，只在必需时使用Tabindex -1和0

tabindex="-1"

将tabindex设置为“-1”允许您使用脚本设置元素的焦点，但不会将其放置在页面的tab顺序中。这很方便，当您需要将焦点移动到通过脚本或用户操作之外更新的某些内容时。

tabindex="0"

将tabindex设置为“0”将使元素变为可聚焦状态。它不会设置元素在tab顺序中的位置，只允许用户按DOM决定的位置集中元素。

tabindex="1"（或任何大于0的值）

不要设置tabindex="1"或任何大于零（或任何正数）的值。