$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

我正在创建一个所有可聚焦元素的SCSS列表，我认为这可能会帮助一些人，因为这个问题的谷歌排名。

有几件事需要注意:

我把:not([tabindex="-1"])改为:not([tabindex^="-"])，因为它完全可能以某种方式生成-2。安全总比后悔好，对吧? 添加:not([tabindex^="-"])到所有其他可聚焦选择器是完全没有意义的。当使用[tabindex]:not([tabindex^="-"])时，它已经包含了你要用:not来否定的所有元素! 我包含了:not([disabled])，因为禁用的元素永远不能聚焦。所以把它加到每一个元素上是没有用的。

$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

我正在创建一个所有可聚焦元素的SCSS列表，我认为这可能会帮助一些人，因为这个问题的谷歌排名。

有几件事需要注意:

我把:not([tabindex="-1"])改为:not([tabindex^="-"])，因为它完全可能以某种方式生成-2。安全总比后悔好，对吧? 添加:not([tabindex^="-"])到所有其他可聚焦选择器是完全没有意义的。当使用[tabindex]:not([tabindex^="-"])时，它已经包含了你要用:not来否定的所有元素! 我包含了:not([disabled])，因为禁用的元素永远不能聚焦。所以把它加到每一个元素上是没有用的。

这里我有一个css选择器基于bobince的答案选择任何可聚焦的HTML元素:

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

或者在SASS中更漂亮一点:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

我把它作为一个答案，因为那是，我正在寻找的，当谷歌重定向我到这个Stackoverflow问题。

编辑:还有一个选择器，它是可聚焦的:

[contentEditable=true]

然而，这种方法很少使用。

也许这个可以帮到你:

函数集中(el) { el.focus (); 返回厄尔= = document.activeElement; }

返回值:true =成功，false =失败

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

js可访问性库提供了一个非官方的、基于测试的列表:

https://allyjs.io/data-tables/focusable.html

(注意:他们的页面没有说明多久进行一次测试。)

有一种更优雅的方式来处理这个问题:

像下面的示例一样扩展元素原型。 然后你可以这样使用它:

element.isFocusable()

*如果“element”是可聚焦的则返回true，否则返回false。

/** * Determining if an element can be focused on * @return {Boolean} */ HTMLElement.prototype.isFocusable = function () { var current = document.activeElement if (current === this) return true var protectEvent = (e) => e.stopImmediatePropagation() this.addEventListener("focus", protectEvent, true) this.addEventListener("blur", protectEvent, true) this.focus({preventScroll:true}) var result = document.activeElement === this this.blur() if (current) current.focus({preventScroll:true}) this.removeEventListener("focus", protectEvent, true) this.removeEventListener("blur", protectEvent, true) return result } // A SIMPLE TEST console.log(document.querySelector('a').isFocusable()) console.log(document.querySelector('a[href]').isFocusable()) <a>Not focusable</a> <a href="#">Focusable</a>