HTML - DOM 元素 tabIndex 属性

tabIndex 属性允许您访问和更新元素的 tabIndex 属性的值。tabIndex 属性控制使用 Tab 键遍历网页时元素的聚焦顺序。

语法

设置 tabIndex 属性值

element.tabIndex = newValue;

获取 tabIndex 属性值

element.tabIndex;

属性值

值	描述
newValue	更改元素选项卡顺序的整数。

返回值

tabIndex 属性返回一个整数，该整数保存元素的选项卡顺序。

HTML DOM 元素“tabIndex”属性示例

以下是一些示例，这些示例展示了如何使用“tabIndex”属性来控制使用 Tab 键遍历网页时元素的选项卡顺序。

使用 tabIndex 属性控制焦点顺序

此示例演示了如何使用 tabIndex 属性。它包括三个<div> 元素，每个元素都有一个 tabIndex 属性，用于确定它们的选项卡顺序。当单击任何项目时，一个函数会更新<p> 元素以显示选择了哪个项目。

<!DOCTYPE html>
<html lang="en">
<head> 
  <style>
    .item {
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>tabIndex Property</h2>
  <p>Click on any item or use the Tab key to 
    navigate through the items.<br>Notice the 
    order based on the tabIndex values...
  </p>

  <div class="item"tabindex="1"onclick="select(1)">
  	Item 1
  </div>
  <div class="item"tabindex="2"onclick="select(2)">
  	Item 2
  </div>
  <div class="item"tabindex="3"onclick="select(3)">
  	Item 3
  </div>

  <p id="selitem">Selected item will appear here.</p>

  <script>
    function select(itemId) {
      var s=document.getElementById('selitem');
      s.textContent ='Item'+itemId+'selected!';
    }
  </script>
</body>

</html>

获取第一个锚元素的选项卡索引

此示例使用 tabIndex 属性设置网页上 <a> 元素的选项卡顺序。用户可以通过单击或使用 Tab 键以指定的顺序遍历这些链接。

<!DOCTYPE html>
<html lang="en">
<head>  
  <title>Retrieve Tab Index Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>tabIndex Property</h2>
  <p>Use the Tab key to navigate through the links.
    Notice the order based on the tabIndex values.
  </p>

  <a href="https://tutorialspoint.com/"
    tabindex="3">Tutorialspoint</a><br>
  <a href="http://www.microsoft.com/" 
    tabindex="1">Microsoft</a><br>
  <a href="http://www.google.com/" 
    tabindex="2">Google</a><br>
  <a href="https://www.infosys.com/" 
    tabindex="4">Infosys</a>

  <p id="tabInfo"></p>

  <script>
    // Get the first <a> element
    var fl = document.querySelector('a');

    // Get its tabIndex value
    var tabn = fl.tabIndex;

    // Display the tabIndex value
    var tIi = document.getElementById('tabInfo');
    tIi.textContent = 
    'Tab Index of the first <a> element:'+ tabn;
  </script>
</body>

</html>

支持的浏览器

属性
tabIndex	是	是	是	是	是

html_dom_element_reference.htm

打印页面

上一个

下一个