如何选择用户可以使用JavaScript切换至的所有html元素？

Question

如何选择用户可以按Tab键导航到的所有元素？

我是否必须对输入，文本区域，a，按钮等进行硬编码，或者是否可以通过浏览器的默认名称进行识别？

我最终想要实现的目标是在这里：Default tabbing behavior puts links behind sticky header

Answer 1

您可以尝试使用document.querySelectorAll("[tab-index]")之类的选择器吗？

由于具有tab-index属性为非负值，因此可以确保它是标签的焦点

Answer 2

您可以编写一个查询focusable的每个元素并过滤掉被禁用的元素的函数，因为这也会禁用焦点。

const getKeyboardFocusableElements = (element = document) =>
  Array.from(element.querySelectorAll(
    'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
  )).filter(el => !el.hasAttribute('disabled'));