是否有一个jQuery选择器来获取所有可以获得焦点的元素？
This answer告诉哪些超文本标记语言元素可以接收焦点。是否存在与这些元素完全匹配的jQuery选择器？
现在我只使用$('input,select,textarea,a')，但我想知道是否有更精确的东西。
回答 7
Stack Overflow用户
发布于 2011-10-06 07:04:22
从other SO answer referred to by the OP
目前的浏览器在HTMLElement上定义了
()，...
因此，这意味着将focus作为元素的成员进行测试是无效的，因为所有元素都将拥有它，而不管它们是否实际接受焦点。
...but元素实际上不会获得焦点，除非它是以下元素之一：
使用href
- HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement的
- HTMLAnchorElement/HTMLAreaElement，但不使用
disabled(如果你尝试，IE实际上会给你一个错误)，并且文件上传对于安全reasons - HTMLIFrameElement有不寻常的行为(尽管专注于它不会做任何有用的事情)。其他嵌入元素可能也没有全部测试过。
- 带有
tabindex
的任何元素
那么，如何在jQuery Selector中显式地命名所有这些元素呢
$('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]')更新#1
I updated your jsFiddle here。它似乎起作用了。
我还在上面的列表中添加了属性为contenteditable的元素。
更新#2
正如@jfriend00所指出的，“根据使用情况，人们可能想要过滤掉不可见的元素”。为此，只需将.filter(':visible')应用于从上面的选择器生成的集合。
更新#3
As Xavin pointed out：jQuery UI现在有一个选择器:focusable，它执行此功能。如果你已经在使用jQuery UI，这可能是个好办法。如果不是，那么您可能想要check out how jQuery UI does it。在任何情况下，:focusable的jQuery UI页面上的描述都很有帮助：
如果以下类型的
元素未被禁用，则它们是可聚焦的:输入、选择、文本区域、按钮和对象。如果锚点具有href或tabindex属性，则它们是可聚焦的。如果area元素位于命名的map中，具有href属性，并且有使用该map的可视图像，则它们是可聚焦的。所有其他元素仅基于其tabindex属性和可见性是可聚焦的。
因此，我上面提出的选择器是接近的，但它没有考虑到一些细微差别。
下面是从jQuery UI中摘取的函数，并对其进行了较小的调整以使其自包含。(改编未经测试，但应该可以工作)：
function focusable( element ) {
var map, mapName, img,
nodeName = element.nodeName.toLowerCase(),
isTabIndexNotNaN = !isNaN( $.attr( element, "tabindex" ) );
if ( "area" === nodeName ) {
map = element.parentNode;
mapName = map.name;
if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
return false;
}
img = $( "img[usemap=#" + mapName + "]" )[0];
return !!img && visible( img );
}
return ( /input|select|textarea|button|object/.test( nodeName ) ?
!element.disabled :
"a" === nodeName ?
element.href || isTabIndexNotNaN :
isTabIndexNotNaN) &&
// the element and all of its ancestors must be visible
visible( element );
function visible( element ) {
return $.expr.filters.visible( element ) &&
!$( element ).parents().addBack().filter(function() {
return $.css( this, "visibility" ) === "hidden";
}).length;
}
}注意:以上功能仍然依赖于jQuery，但不需要jQuery UI。
Stack Overflow用户
发布于 2014-10-22 21:42:53
另一个简单但完整的jQuery选择器可能是这个：
$('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
.not('[tabindex=-1], [disabled], :hidden')Stack Overflow用户
发布于 2017-10-25 01:55:36
我有一个相对简单的解决方案，可以在不使用jQuery的情况下，按tab键顺序返回所有可选项子对象。
function tabbable(el) {
return [].map.call(el.querySelectorAll([
'input',
'select',
'a[href]',
'textarea',
'button',
'[tabindex]'
]), function(el, i) { return { el, i } }).
filter(function(e) {
return e.el.tabIndex >= 0 && !e.el.disabled && e.el.offsetParent; }).
sort(function(a,b) {
return a.el.tabIndex === b.el.tabIndex ? a.i - b.i : (a.el.tabIndex || 9E9) - (b.el.tabIndex || 9E9); });
}对于IE，考虑实现与e.el.offsetParent不同的可见性检查。jQuery可以在这方面帮助你。
如果不需要对元素进行排序，可以省略对sort()的调用。
https://stackoverflow.com/questions/7668525
复制相似问题
腾讯云开发者
