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

问题描述

我正在寻找一个允许重点关注的 HTML 元素的确定列表，即当 focus()被调用时哪些元素将被放在焦点？

最佳解决方案

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

今天的浏览器在 HTMLElement 上定义了 focus()，但是一个元素实际上不会专注，除非它是以下之一：

带有 href 的 HTMLAnchorElement /HTMLAreaElement
HTMLInputElement /HTMLSelectElement /HTMLTextAreaElement /HTMLButtonElement 但不是与 disabled(IE 实际上给你一个错误，如果你尝试)，并且文件上传有不寻常的行为，出于安全原因
HTMLIFrameElement(虽然重点没有做任何有用的事情) 。其他嵌入元素也可能，我还没有测试它们。
任何具有 tabindex 的元素

… 除非 tabindex 是-1，这使焦点不可能。

根据浏览器，这种行为可能会有其他微妙的例外和补充。

次佳解决方案

在这里，我有一个基于 bobince 的 answer 的 CSS-selector 来选择任何可重点的 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]

但是，这很少使用。

参考文献

Which HTML elements can receive focus?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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