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

Question

哪些HTML元素可以接收焦点？我正在寻找一个HTML元素的明确列表，这些元素允许聚焦，也就是说，当focus()被召唤了吗？我正在编写一个jQuery扩展，它工作在可以聚焦的元素上。我希望这个问题的答案将使我能够具体说明我所针对的内容。

Answer 1

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

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

• 带有href的HTMLAncementElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement但不是

  disabled

  (如果您尝试的话，实际上会给您一个错误)，而且文件上传出于安全原因有不寻常的行为。
• HTMLIFrameElement(虽然聚焦并没有做任何有用的事情)。其他嵌入元素也可能，我还没有全部测试过。
• 具有

  tabindex

根据浏览器的不同，这种行为可能会有其他微妙的异常和添加。

Answer 2

这里我有一个基于鲍文斯氏回答要选择任何可聚焦的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 */
  }

或者更漂亮一点：

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

我增加了它作为一个答案，因为这是，我正在寻找的，当谷歌重定向我到这个堆栈溢出的问题。

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

[contentEditable=true]

然而，这是很少使用的。

Answer 3

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

  因为禁用元素可以

  绝不可能

  可聚焦。所以再一次，把它添加到每个元素中是没有用的。