49

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

4

4 回答 4

106

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

  • 正数 (1,2,3...32767) 按 Tab 顺序处理。
  • 0 按源顺序处理（它出现在 DOM 中的顺序）
  • -1 在制表符期间被忽略，但可聚焦。

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

于 2013-06-14T17:09:42.023 回答
41

HTML 规范指出：

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

于 2010-11-07T00:52:06.410 回答
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 的元素之间的 tab 顺序，只是声明它应该遵循平台约定。

于 2010-11-07T01:54:48.507 回答
0

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

测试为 Firefox 32.03 的情况。

于 2014-10-13T02:38:04.717 回答