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

Question

我正在寻找一个允许聚焦的HTML元素的确定列表,即哪些元素在focus()被调用时会被聚焦？

我正在编写一个jQuery扩展,它可以处理可以引起关注的元素.我希望这个问题的答案能让我具体说明我所针对的要素.

Answer 1

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

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

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

根据浏览器的不同,这种行为可能会有其他细微的例外和补充.

Answer 2

在这里,我有一个基于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 */
  }

或者在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]

但是,很少使用它.

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])是因为禁用的元素永远无法聚焦。所以再次将它添加到每个元素是没用的。

Answer 4

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

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

(注意:他们的页面没有说明测试的执行频率.)

Answer 5

也许这个可以帮助：

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

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

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