Question

当网页有标签时，tabindex值为0的元素以什么顺序聚焦？

Answer 1

tabindex分配按以下方式处理（对于支持tabindex属性的元素）：

正数（1,2,3 ... 32767）按Tab键顺序处理。
0按源顺序处理（它在DOM中出现的顺序）
-1，但是可以调焦。

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

Answer 2

HTML specification州：

具有相同tabindex的元素值应该在。中导航命令它们出现在角色中流。

Answer 3

这比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的元素之间的Tab键顺序，只是声明它应该遵循平台约定。

Answer 4

一个例子是记住的最好方法。

假设您正在按键盘上的Tab键

<button tabindex="0">one</button>
<button tabindex="-1">two</button>
<button tabindex="0">three</button>
<button tabindex="5">four</button>

在Tab键按下期间，第一个four会被聚焦（因为tabindex最高）
然后one（因为tabindex为0，第二高，但在文档中显示为1st）
然后three（因为tabindex为0，与上面相同，但是在文档中显示为第二）
那么什么也没有（two永远不会集中，因为tabindex为-1）

为什么需要tabindex =“ 0”？反正标签停在按钮上，对吧？
没错，您也可以为div设置制表位，例如：

<div tabindex="0">some content</div>

例如，当您希望屏幕阅读器停止尝试读取div中的文本时，这很好。

希望有帮助。

Answer 5

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

测试了Firefox 32.03的情况。

tabindex =“0”哪里HTML元素以Tab键顺序结束？

5 个答案: