SVGElement: tabIndex 屬性

Baseline 已廣泛支援

此功能已成熟,可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

SVGElement 介面的 tabIndex 屬性表示當前 SVG 元素的標籤順序。

焦點順序如下:

  1. 具有正數 tabIndex 的元素。tabIndex 值相同的元素應按其出現的順序導航。導航從最低 tabIndex 到最高 tabIndex 進行。
  2. 不支援 tabIndex 屬性或支援該屬性但將其值賦為 0 的元素,按其出現的順序導航。

停用的元素不參與標籤順序。

值不需要是連續的,也不一定以某個特定值開頭。它們甚至可以是負數,儘管每個瀏覽器都會裁剪非常大的值。

一個整數。

示例

設定 tabIndex 屬性

html
<svg id="svg1" tabindex="2" xmlns="http://www.w3.org/2000/svg" role="img">
  <circle cx="50" cy="50" r="40" fill="blue"></circle>
</svg>
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" role="img">
  <rect width="100" height="100" fill="green"></rect>
</svg>
js
const svg1 = document.getElementById("svg1");
const svg2 = document.getElementById("svg2");

// Access and modify the tabIndex
console.log(svg1.tabIndex); // 2
svg2.tabIndex = 1; // Add svg2 to the tab order before svg1

// Programmatically focus on an element with negative tabIndex
svg1.tabIndex = -1;
svg1.focus(); // Works, even though it is not in the tabbing order

規範

規範
HTML
# dom-tabindex

瀏覽器相容性

另見