如何在 HTML 中创建元素的 Tab 键顺序？

tabindex 是一个全局属性，它使 HTML 元素能够按顺序获得键盘焦点（通常使用键盘的 Tab 键）。为了以可访问的方式发挥作用，它需要一个值为 0、负数或正数的值。tabindex 属性可以应用于任何 HTML 元素。

语法

<element tabindex = "number">

以下是一些示例……

示例

在以下示例中，我们使用基 URL = https://tutorialspoint.com/index.htm，所有其他相对链接都将以此作为起始 URL。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align:center;
      }
      h1 {
         color:green;
      }
      a {
         text-decoration:none;
      }
   </style>
</head>
<body>
   <h1>Press TAB To Navigate</h1>
   <a href="https://tutorialspoint.com/index.htm" tabindex="2">TUTORIALSPOINT</a>
   <br>
   <a href="https://www.youtube.com//" tabindex="1">
      YOUTUBE
   </a>
   <br>
   <a href="https://www.google.com//" tabindex="3">
      GOOGLE
   </a>
</body>
</html>

输出

执行后，将显示带有不同链接和名称的输出。我们使用 Tab 键在它们之间导航，并且我们提到了不同的 tabindex。

示例：使用 Javascript

现在让我们看看使用 JavaScript 的示例 -

<!DOCTYPE html>
<html>
<body>
   <div tabindex="1">Tutorialspoint</div><br>
   <div tabindex="3">Google</div><br>
   <div tabindex="2">Microsoft</div>
   <script>
      document.getElementsByTagName('div')[0].focus();
   </script>
   <p tabindex="2"><b>Note:</b>press "tab" to navigate.</p>
</body>
</html>

输出

执行上述脚本后，tabindex 将被激活，并帮助我们在名称之间导航。

使用表单操作

在这种情况下，我们创建一个表单并提交值。输入是在每个指定的文本框中获取的。这里，tabindex 用于对表单中输入值的顺序进行排序。

示例

如以下示例所示，输入是从按 tabindex = 1、3、4、6 的顺序填充的四个文本框中获取的。

<!Doctype html>
<html>
<body>
   <form action="#" method="post">
      <table summary="the first column contains the search criteria of the groom, the second column the search criteria of of the bride">
         <caption>Search for marriage records</caption>
         <tr>
            <th>Search criteria</th>
            <th>Groom</th>
            <th>Bride</th>
         </tr>
         <tr>
            <th>First name</th>
            <td><input type="text" size="30" value="" name="groomfirst" title="First name of the groom" tabindex="1"></td>
            <td><input type="text" size="30" value="" name="bridefirst" title="First name of the bride" tabindex="4"></td>
         </tr>
         <tr>
            <th>Place of birth</th>
            <td><input type="text" size="30" value="" name="groombirth" title="Place of birth of the groom" tabindex="3"></td>
            <td><input type="text" size="30" value="" name="bridebirth" title="Place of birth of the bride" tabindex="6"></td>
         </tr>
      </table>
   </form>
</body>
</html>

输出

运行上述代码后，我们会得到一个婚姻搜索记录表，并且 tabindex 被激活，允许我们进行导航。

更新于: 2022年9月5日

5K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告