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

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

36 голосов
/ 07 ноября 2010

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

Ответы [ 5 ]

87 голосов
/ 14 июня 2013

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

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

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

31 голосов
/ 07 ноября 2010

Спецификация HTML сообщает:

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

22 голосов
/ 07 ноября 2010

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

После анализа 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 практически не дает никаких гарантий относительно порядка табуляции между элементами, у которых индекс табуляции равен 0, просто заявляя, что он должен следовать соглашениям платформы.

2 голосов
/ 07 декабря 2018

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

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

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

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

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

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

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

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

0 голосов
/ 13 октября 2014

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

Проверено на Firefox 32.03.

...