HTML 的 `tabindex` - 是否可以变成 "regional"?

HTML's `tabindex` - can it become "regional" or not?

我用 AngularJS 多次重复 HTML 的块,我想在每个项目中独立设置焦点顺序。

困扰我的是我不太清楚 tabindex 应该如何工作。 浏览器是否应该对整个文档使用 tabindex 属性,或者它的范围在某些情况下可以被认为是区域性的,例如在文档的某个区域内(例如 <form> 元素内)遵循 Tab 键顺序,直到您离开该区域?

基本上,我在重复块中的元素将具有固定的 tabindex 值,因此当它们乘以 ng-repeat 时,将会有许多 tabindex="1" 和许多 tabindex="2", ETC。 我可以拥有它并使 taborder 在每个重复的项目中成为区域性的吗?

我一直试图在这里阅读这个东西(我在 Google 上找到它),但我还没有设法找到可以回答我问题的东西:http://www.w3.org/TR/html5/editing.html.

这里: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex 我找到了这个语句:

If several elements share the same tabindex, their relative order follows their relative position in the document).

这是否意味着 tabindex 不能是区域性的?

我可以尝试在浏览器中进行试验,但我想知道是否有人知道规范对此有何规定。

我知道一些使 tabindex 值与 Angular 唯一的替代方法,但我想尽可能避免它。

Is the browser supposed to use the tabindex attribute for the whole document

是的。

or its scope can be considered regional in some cases

没有

If several elements share the same tabindex, their relative order follows their relative position in the document).

这是否意味着 tabindex 不能是区域性的?

不,这意味着如果你有

<label><input tabindex="1"> A</label>
<label><input tabindex="2"> B</label>
<label><input tabindex="1"> C</label>
<label><input tabindex="2"> D</label>

...那么顺序就是A(第一个1),C(第二个1),B(第一个2),D(第二个2)。

不,tabindex 不是地区性的。

您最好为文档的三个部分保留 tabindex 的范围。

例如:

  • 重复块之前:tabindex < 100.
  • 在重复块中:从 100 开始,每次迭代递增 10。所以第一次迭代得到 100、101、102、103 ...,第二次迭代得到 110、111、112、113 ...。
  • 重复块之后:tabindex > 300。(这意味着您有足够的空间进行 ng-repeat 的 20 次迭代)。

如前所述,tabindex 是一个全局属性。

tabindex = integer

Specifies whether the element represents an element that is is focusable (that is, an element which is part of the sequence of focusable elements in the document), and the relative order of the element in the sequence of focusable elements in the document.

specs

中阅读更多内容

请注意,如果在页面中的任何位置设置了 tabindex,那么您将首先循环遍历所有设置了 tabindex 的元素,然后在您聚焦所有具有 tabindex 属性的元素之后,您将 return文档的开头并遵循正常的页面流程。