tabindex="0"的HTML元素在键盘遍历顺序中排在哪里？

Question

tabindex="0"的HTML元素在键盘遍历顺序中排在哪里？

htmltabindex

55

当网页使用tab键切换时，tabindex值为0的元素的聚焦顺序是什么？

- HELP

1

值得注意的是，在我的测试中，tabindex="0" 和在元素上没有设置tabindex是一样的。 - Kip

4

tabindex="0" 的一个区别在于，通过添加tabindex="0"，通常无法进行选项卡操作的元素可以变得可选项卡。具有讽刺意味的是，实际上并没有为它们指定选项卡索引。 - Nat

4个回答

42

HTML规范指出:

具有相同tabindex值的元素应按照它们在字符流中出现的顺序进行导航。

- Alan Haggai Alavi

4

字符流是什么意思？ - HELP

6

在(x)html标记中出现的顺序可以作为任何一种解释，因此，具有相同tabindex值的两个元素将首先聚焦于在标记中首先出现的元素，然后移动到下一个元素（但要记住，由于css，页面上的顺序不等同于标记中的顺序）。因此，“@snufey”所说的内容是这样的。 - David Thomas

22

这比Alan Haggai Alavi的回答要复杂一些。

解析后，IE8和Opera遵循HTML4规范。而Firefox和Chrome则使用DOM顺序。这在存在格式不正确的标记时非常重要。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 1</title>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <div><input id="second" value="second in the character stream" tabindex="0"></div>
      </table>
    <form>
  </body>
</html>

你可能会认为，对于格式不正确的标记来说，所有的赌注都已经作废了，那么JavaScript呢？

考虑以下情况：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test case 2</title>
    <script type="text/javascript">
      moveFirst = function()
      {
        var f = document.getElementById("first");
        f.parentNode.removeChild(f);
        document.body.appendChild(f);
      }
    </script>
  </head>
  <body>
    <form>
      <table>
        <tr><td><input id="first" value="first in the character stream" tabindex="0"></td></tr>
        <tr><td><div><input id="second" value="second in the character stream" tabindex="0"></div></td></tr>
      </table>
    <form>
    <div onclick="moveFirst()">move</div>
  </body>
</html>

在这种情况下，当用户点击“移动”时，IE8、Firefox、Chrome和Opera都使用DOM顺序，而不是字符流顺序。

最后，HTML5几乎不保证具有tabindex为0的元素之间的选项卡顺序，仅声明它应该遵循平台惯例。

- Alohci

0

tabindex="0" 可以包括在Web浏览器中的非页面元素，例如URL地址栏。

已在Firefox 32.03中测试。

- Kevin

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

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

- haltersweb · Accepted Answer

tabindex 属性赋值的处理方式如下（对于支持 tabindex 属性的元素）：

正数（1、2、3...32767）按照 Tab 键顺序进行处理。
0 按照源代码顺序进行处理（按照其在 DOM 中出现的顺序）。
-1 在使用 Tab 键时会被忽略，但是可以获得焦点。

本信息摘自：http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex