Where do tabindex=“0” HTML elements end up in the

2楼-- · 2019-03-12 04:38

An example is the best way to remember.

Assume you are pressing Tab key on the keyboard

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

First four will be focused during Tab press (because tabindex is highest)
then one (because tabindex is 0, next highest, but 1st displayed in the document)
then three (because tabindex is 0, same as above, but 2nd displayed in the document)
then nothing else (The two is never focused because tabindex is -1)

Why is tabindex="0" required? anyway tab stops at a button, right?
True, you can also have tab stop for a div, like:

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

For example, this is good when you want a screen reader stop to attempt to read a text in a div.

Hope that helped.

0人赞添加讨论(0) 举报

Ridiculous、

3楼-- · 2019-03-12 04:39

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人赞添加讨论(0) 举报

再贱就再见

4楼-- · 2019-03-12 04:42

tabindex assignments are handled the following way (for elements that support the tabindex attribute):

Positive numbers (1,2,3...32767) are handled in tab order.
0 is handled in source order (the order it appears in the DOM)
-1 is ignored during tabbing but is focusable.

This information is taken from : http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

0人赞添加讨论(0) 举报

Emotional °昔

5楼-- · 2019-03-12 04:42

tabindex="0" can include tabbing to non-page elements of the web browser, such as the URL address bar.

Tested to be the case for Firefox 32.03.

0人赞添加讨论(0) 举报

倾城　Initia

6楼-- · 2019-03-12 04:46

The HTML specification states:

Elements that have identical tabindex values should be navigated in the order they appear in the character stream.

0人赞添加讨论(0) 举报

Where do tabindex=“0” HTML elements end up in the

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间