我正在寻找一个明确的HTML元素列表，允许采取焦点，即哪些元素将放在焦点时，焦点()被调用对他们?
我正在编写一个jQuery扩展，它可以对可以聚焦的元素进行处理。我希望这个问题的答案能让我明确我的目标元素。
当前回答
有一种更优雅的方式来处理这个问题:
像下面的示例一样扩展元素原型。 然后你可以这样使用它:
element.isFocusable()
*如果“element”是可聚焦的则返回true，否则返回false。
/** * Determining if an element can be focused on * @return {Boolean} */ HTMLElement.prototype.isFocusable = function () { var current = document.activeElement if (current === this) return true var protectEvent = (e) => e.stopImmediatePropagation() this.addEventListener("focus", protectEvent, true) this.addEventListener("blur", protectEvent, true) this.focus({preventScroll:true}) var result = document.activeElement === this this.blur() if (current) current.focus({preventScroll:true}) this.removeEventListener("focus", protectEvent, true) this.removeEventListener("blur", protectEvent, true) return result } // A SIMPLE TEST console.log(document.querySelector('a').isFocusable()) console.log(document.querySelector('a[href]').isFocusable()) <a>Not focusable</a> <a href="#">Focusable</a>
其他回答
js可访问性库提供了一个非官方的、基于测试的列表:
https://allyjs.io/data-tables/focusable.html
(注意:他们的页面没有说明多久进行一次测试。)
这里我有一个css选择器基于bobince的答案选择任何可聚焦的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 */
}
}
我把它作为一个答案，因为那是，我正在寻找的，当谷歌重定向我到这个Stackoverflow问题。
编辑:还有一个选择器，它是可聚焦的:
[contentEditable=true]
然而，这种方法很少使用。
也许这个可以帮到你:
函数集中(el) { el.focus (); 返回厄尔= = 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
没有一个明确的列表，这取决于浏览器。我们拥有的唯一标准是DOM Level 2 HTML，根据该标准，具有focus()方法的唯一元素是 htmllinputelement, HTMLSelectElement, HTMLTextAreaElement和htmllanchorelement。这明显省略了HTMLButtonElement和HTMLAreaElement。
今天的浏览器在HTMLElement上定义了focus()，但一个元素实际上不会接受focus，除非它是以下情况之一:
htmllanchorelement /HTMLAreaElement带有href htmllinputelement /HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement，但没有禁用(IE实际上会给你一个错误，如果你尝试)，文件上传有不寻常的行为出于安全原因 HTMLIFrameElement(尽管聚焦它没有做任何有用的事情)。可能还有其他嵌入元素，我还没有全部测试。 任何带有tabindex的元素
根据浏览器的不同，可能会有其他微妙的例外和附加行为。
有一种更优雅的方式来处理这个问题:
像下面的示例一样扩展元素原型。 然后你可以这样使用它:
element.isFocusable()
*如果“element”是可聚焦的则返回true，否则返回false。
/** * Determining if an element can be focused on * @return {Boolean} */ HTMLElement.prototype.isFocusable = function () { var current = document.activeElement if (current === this) return true var protectEvent = (e) => e.stopImmediatePropagation() this.addEventListener("focus", protectEvent, true) this.addEventListener("blur", protectEvent, true) this.focus({preventScroll:true}) var result = document.activeElement === this this.blur() if (current) current.focus({preventScroll:true}) this.removeEventListener("focus", protectEvent, true) this.removeEventListener("blur", protectEvent, true) return result } // A SIMPLE TEST console.log(document.querySelector('a').isFocusable()) console.log(document.querySelector('a[href]').isFocusable()) <a>Not focusable</a> <a href="#">Focusable</a>
