如何将焦点设置在第一个可聚焦元素 jQuery 上？

Question

我一直在研究 dropdown/popup 菜单，我觉得它很好用，只有一个例外；当您单击 link（或按回车键）打开菜单时，焦点应该设置为下一个可以接收焦点的元素。因此，在此示例中，单击 "Menu 1" link，应展开菜单，并将焦点设置在 "test 1" 上。但由于某种原因，它跳转到最后一个可聚焦元素（测试 3）：

<ul class="axxs-menu">
  <li><a class="trigger">Menu 1</a>
    <ul class="content">
      <li><a href="#1">test 1</a></li>
      <li><a href="#2">test 2</a></li>
      <li><a href="#3">test 3</a></li>
    </ul>
  </li>
</ul>

这里是相关的js：

jQuery.extend(jQuery.expr[':'], {
    focusable: function(el, index, selector){
    return $(el).is('a, button, :input, [tabindex]');
}
});

function openPopmenu(element) { 
$(element).removeClass('trigger-inactive').addClass('trigger-active').attr("aria-expanded", "true").attr("aria-selected", "true");
 $(element).next('.collapsed').removeClass('collapsed').addClass('expanded').show().attr("aria-hidden", "false");
$(element).next().find(':focusable').focus();
}

这是一支密码笔：

http://codepen.io/tactics/pen/EZbGBY

非常感谢任何帮助。

Answer 1

此语句 $(element).next().find(':focusable').focus(); 将查找所有具有 focusable 属性的元素，returns 最后一个。您要做的是将其限制为第一个特定的。您可以使用 .eq() 函数指定您想要的实际索引，如下所示

$(element).next().find(':focusable').eq(0).focus();

Answer 2

你需要的是 find the first focusable element:

$(element).next().find(':focusable').first().focus();

在没有 .first() 的情况下，focus() 应用于匹配 :focusable 的所有元素，最终聚焦于最后一个元素。

Answer 3

:focusable 伪选择器仅适用于 jquery-ui。如果您只使用 jquery 然后将 '.find(':focusable') 替换为以下内容：

.find('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])')

Answer 4

对的一点改进，因为隐藏的输入类型不可聚焦，应排除在外。因此，将“.find(':focusable')”替换为：

.find('button, a, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')

如何将焦点设置在第一个可聚焦元素 jQuery 上？

How to set focus on first focusable element jQuery?

jquery

focusable