49

tabindexWebページがタブ化されている場合、値が0の要素はどのような順序でフォーカスされますか？

4

4 に答える 4

106

tabindextabindex割り当ては次の方法で処理されます（属性をサポートする要素の場合）。

  • 正の数（1,2,3 ... 32767）はタブ順に処理されます。
  • 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

AlanHaggaiAlaviの答えよりも少し複雑です。

解析後、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の要素間のタブの順序についてほとんど保証せず、プラットフォームの規則に従う必要があることを示しているだけです。

于 2010-11-07T01:54:48.507 に答える
0

tabindex="0"URLアドレスバーなど、Webブラウザのページ以外の要素へのタブを含めることができます。

Firefox32.03の場合であることがテストされています。

于 2014-10-13T02:38:04.717 に答える