哪些 HTML 元素可以接收焦点？

Which HTML elements can receive focus?

提问by Paul Turner

I'm looking for a definitive list of HTML elements which are allowed to take focus, i.e. which elements will be put into focus when focus()is called on them?

我正在寻找允许获得焦点的 HTML 元素的明确列表，即在focus()调用它们时哪些元素将被置于焦点？

I'm writing a jQuery extension which works on elements that can be brought into focus. I hope the answer to this question will allow me to be specific about the elements I target.

我正在编写一个 jQuery 扩展，它可以处理可以成为焦点的元素。我希望这个问题的答案能让我具体说明我的目标元素。

回答by bobince

There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus()method are HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This notably omits HTMLButtonElement and HTMLAreaElement.

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

Today's browsers define focus()on HTMLElement, but an element won't actually take focus unless it's one of:

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

• HTMLAnchorElement/HTMLAreaElement with an href
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled(IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons
• HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.
• Any element with a tabindex

• 带有 href 的 HTMLAnchorElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement 但不是 with disabled（如果你尝试，IE 实际上会给你一个错误），并且出于安全原因，文件上传有异常行为
• HTMLIFrameElement （虽然聚焦它并没有做任何有用的事情）。其他嵌入元素也可能，我还没有全部测试过。
• 任何带有 tabindex

There are likely to be other subtle exceptions and additions to this behaviour depending on browser.

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

回答by ReeCube

Here I have a CSS-selector based on bobince's answerto select any focusable HTML element:

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

  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 */
  }

or a little more beautiful in SASS:

或者在 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 */
    }
}

I've added it as an answer, because that was, what I was looking for, when Google redirected me to this Stackoverflow question.

我已将其添加为答案，因为当 Google 将我重定向到此 Stackoverflow 问题时，这正是我所寻找的。

EDIT:There is one more selector, which is focusable:

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

[contentEditable=true]

However, this is used very rarely.

但是，这很少使用。

回答by Dustin

$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])';

I'm creating a SCSS list of all focusable elements and I thought this might help someone due to this question's Google rank.

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

A few things to note:

需要注意的几点：

• I changed :not([tabindex="-1"])to :not([tabindex^="-"])because it's perfectly plausible to generate -2somehow. Better safe than sorry right?
• Adding :not([tabindex^="-"])to all the other focusable selectors is completely pointless. When using [tabindex]:not([tabindex^="-"])it already includes all elements that you'd be negating with :not!
• I included :not([disabled])because disabled elements can neverbe focusable. So again it's useless to add it to every single element.

• 我换:not([tabindex="-1"])到:not([tabindex^="-"])，因为这是完全可行的，产生-2莫名其妙。安全总比后悔好，对吧？
• 添加:not([tabindex^="-"])到所有其他可聚焦选择器是完全没有意义的。使用[tabindex]:not([tabindex^="-"])它时，它已经包含了您要否定的所有元素:not！
• 我包括在内:not([disabled])是因为禁用的元素永远无法聚焦。所以再次将它添加到每个元素是没用的。

回答by ling

The ally.jsaccessibility library provides an unofficial, test-based list here:

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

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

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

(NB: Their page doesn't say how often tests were performed.)

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

回答by Yohannes Kristiawan

Maybe this one can help:

也许这个可以帮助：

function focus(el){
 el.focus();
 return el==document.activeElement;
}

return value: true = success, false = failed

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

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

参考资料：https: //developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

回答by Barreto Freekhealer

The :focus selector is allowed on elements that accept keyboard events or other user inputs.

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

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

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