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

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

我正在写一个jQuery扩展，它可以使元素集中在一起。 我希望这个问题的答案可以让我具体说明我的目标。

Answer 1

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

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

• 带有href的HTMLAnchorElement / HTMLAreaElement
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement但不禁用（如果您尝试，IE实际上会给您一个错误），并且file upload出于安全原因有exception行为
• HTMLIFrameElement（虽然集中它没有做任何有用的）。 其他embedded元素，也许，我没有testing过他们。
• 任何带有tabindex元素

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

根据浏览器的不同，很可能会有其他细微的例外和增加。

Answer 2

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

我已经添加了它作为答案，因为那是当我redirect到这个Stackoverflow问题时，我正在寻找什么。

编辑：还有一个select器，这是可调焦的：

 [contentEditable=true] 

但是，这很less使用。

Answer 3

ally.js辅助function库提供了非官方的，基于testing的列表：

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

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

Answer 4

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

我正在创build一个SCSS的所有关注元素列表，我认为这可能有助于某人由于这个问题的谷歌排名。

有几件事要注意：

• 我改变了:not([tabindex="-1"])为:not([tabindex^="-"])因为以某种方式生成-2是完全合理的。 最好安全比对不起吧？
• 添加:not([tabindex^="-"])所有其他可调焦select器是完全没有意义的。 当使用[tabindex]:not([tabindex^="-"])它已经包含了所有你将会否定的元素:not ！
• 我包括:not([disabled])因为禁用的元素永远不能被聚焦。 所以再次将它添加到每一个元素是没有用的。

Answer 5

button，checkbox，file upload，图层，密码，收音机，重置，select，提交，文本，Textarea，窗口

Answer 6

焦点select器允许接受键盘事件或其他用户input的元素。

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