SVGElement: thuộc tính tabIndex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Thuộc tính tabIndex của giao diện SVGElement đại diện cho thứ tự tab của phần tử SVG hiện tại.

Thứ tự tab như sau:

Các phần tử có tabIndex dương. Các phần tử có cùng giá trị tabIndex sẽ được điều hướng theo thứ tự xuất hiện. Điều hướng đi từ tabIndex thấp nhất đến tabIndex cao nhất.
Các phần tử không hỗ trợ thuộc tính tabIndex hoặc hỗ trợ nhưng gán tabIndex bằng 0, theo thứ tự xuất hiện.

Các phần tử bị vô hiệu hóa không tham gia vào thứ tự tab.

Các giá trị không cần phải liên tiếp, cũng không nhất thiết phải bắt đầu từ một giá trị cụ thể. Chúng thậm chí có thể âm, mặc dù mỗi trình duyệt có thể cắt bớt các giá trị quá lớn.

<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>

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