Question

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

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

Answer 1

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

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

带有href的HTMLAnchorElement / HTMLAreaElement
HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement但不包含disabled（如果您尝试，IE实际上会给您一个错误），并且出于安全原因，文件上传有异常行为
HTMLIFrameElement（虽然重点关注它没有做任何有用的事情）。其他嵌入元素也许，我还没有测试过它们。
具有tabindex

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

Answer 2

在这里，我有一个基于bobince＆＃39; s answer的CSS选择器来选择任何可聚焦的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]

然而，很少使用它。

Answer 3

ally.js辅助功能库在此处提供了一个非官方的，基于测试的列表：

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

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

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

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

A few things to note:

I changed :not([tabindex="-1"]) to :not([tabindex^="-"]) because it's perfectly plausible to generate -2 somehow. 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 never be focusable. So again it's useless to add it to every single element.

Answer 5

也许这可以帮助您

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

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

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

Answer 6

：接受键盘事件或其他用户输入的元素允许使用焦点选择器。

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

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

6 个答案: