当前位置：文江博客话题详情

tabindex=“0”在哪里？ HTML 元素最终会按 Tab 键顺序排列吗？

发布于 2024-09-30 23:37:32 字数 56 浏览 0 评论 0原文

当网页选项卡式显示时，tabindex 值为 0 的元素按什么顺序聚焦？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九歌凝 2024-10-07 23:37:32

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

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

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

回复收藏 0 原文

烟雨扶苏 2024-10-07 23:37:32

HTML 规范指出：

具有相同 tabindex 的元素
值应该在
它们在角色中出现的顺序
流。

回复收藏 0 原文

薄荷梦 2024-10-07 23:37:32

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

It's a bit more complicated than Alan Haggai Alavi's answer.

After parsing, IE8 and Opera do as the HTML4 spec says. Firefox and Chrome however use DOM order. This matters with malformed markup like this.

<!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>

You might well argue that with malformed mark-up all bets are off anyway, so what about JavaScript?

Consider this case:

<!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>

In this case, when a user clicks on "move", IE8, Firefox, Chrome and Opera all use DOM order, not character stream order.

Finally HTML5 offers pretty much no guarantees about the tab order between elements that have a tabindex of 0, merely stating that it should follow platform conventions.

回复收藏 0 原文