Где HTML-элементы tabindex = "0" входят в порядок табуляции?

В каком порядке элементы с tabindex значением 0 сфокусированы, когда веб-страница имеет вкладку?

Ответ 1

спецификация HTML гласит:

Элементы, имеющие одинаковый табуиндекс значения должны быть перемещены в порядок они появляются в персонаже поток.

Ответ 2

tabindex Назначения обрабатываются следующим образом (для элементов, которые поддерживают атрибут tabindex):

Положительные числа (1,2,3... 32767) обрабатываются в порядке вкладок.
0 обрабатывается в порядке источника (порядок, который он появляется в DOM)
-1 игнорируется во время табуляции, но является настраиваемым.

Эта информация взята из: http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

Ответ 3

Это немного сложнее, чем ответить Алан Хаггай Алави.

После разбора 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, просто заявив, что он должен следовать платформы.

Ответ 4

tabindex="0" может включать в себя табуляцию на нестратегированные элементы веб-браузера, такие как адресная строка URL.

Протестировано для Firefox 32.03.

Ответ 5

Примером является лучший способ запомнить.

Предположим, вы нажимаете клавишу Tab на клавиатуре

Первые four будут сфокусированы во время нажатия Tab (потому что tabindex самый высокий)
затем one (потому что tabindex равен 0, следующий самый высокий, но 1-й отображается в документе)
затем three (потому что tabindex равен 0, то же, что и выше, но 2-й отображается в документе)
то ничего больше

Обратите внимание: эти two никогда не сфокусированы, потому что tabindex является -1

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

Почему требуется tabindex = "0"? в любом случае вкладка останавливается на кнопке, верно?
Правда, у вас также может быть табуляция для div, например:

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

Например, это хорошо, когда вы хотите, чтобы программа чтения с экрана перестала пытаться читать текст в div.

Надеюсь, что это помогло.