哪些HTML元素可以获得焦点？

我正在寻找可以集中注意力的HTML元素的最终列表，即在focus()调用它们时哪些元素将成为焦点？

我正在编写一个jQuery扩展，该扩展适用于可以引起关注的元素。我希望这个问题的答案将使我能够具体说明我要针对的要素。

没有明确的列表，取决于浏览器。我们唯一的标准是DOM Level 2 HTML，根据该标准，唯一具有focus()方法是HTMLInputElement，HTMLSelectElement，HTMLTextAreaElement和HTMLAnchorElement。值得注意的是，这省略了HTMLButtonElement和HTMLAreaElement。

当今的浏览器是focus()在HTMLElement上定义的，但是除非是以下元素之一，否则它实际上不会成为焦点：

• 带有href的HTMLAnchorElement / HTMLAreaElement
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement但不支持disabled（如果尝试，IE实际上会给您一个错误），并且出于安全原因文件上传具有异常行为
• HTMLIFrameElement（尽管集中精力并没有任何用处）。其他嵌入元素也可能尚未全部测试。
• 任何带有 tabindex

根据浏览器的不同，此行为可能还会有其他细微的例外和补充。

在这里，我有一个基于bobince的答案的CSS选择器，用于选择任何可聚焦的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 */
    }
}

我将其添加为答案，因为那是Google在将我重定向到这个Stackoverflow问题时要寻找的东西。

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

[contentEditable=true]

但是，很少使用它。

$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列表，并且由于此问题的Google排名，我认为这可能会对某人有所帮助。

注意事项：

• 我更改:not([tabindex="-1"])为，:not([tabindex^="-"])因为生成完全合理-2某种方式。比后悔更好安全吗？
• 添加:not([tabindex^="-"])到所有其他可聚焦选择器是完全没有意义的。使用时，[tabindex]:not([tabindex^="-"])它已经包括了您要否定的所有元素:not！
• 我:not([disabled])之所以加入，是因为禁用的元素永远无法集中。同样，将其添加到每个元素也没有用。

该ally.js无障碍库这里提供了一个非官方的，基于测试的名单：

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

（注意：他们的页面没有说明执行测试的频率。）

也许这可以帮助：

function focus(el){
	el.focus();
	return el==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

：focus选择器可用于接受键盘事件或其他用户输入的元素。

http://www.w3schools.com/cssref/sel_focus.asp