按下按钮时如何专注于特定元素

问题描述

当单击或按下按钮/触发器（#mobile-menu）时，我会打开一个画布菜单（.mobile-menu-toggle）。

按下键盘后，菜单可以很好地打开，但是它不会集中在菜单中，而是将焦点放在文档流中的下一个元素上-菜单实际上位于文档中的“触发”之前。

因此，我正在寻找一种在画布菜单打开时将焦点设置在其上的方法。

我已经尝试了很多变化，但是什么也没有发生，焦点仍然集中在下一个元素上，而不是我指定的内容上。

$(document).on("keyup",".mobile-menu-toggle",function(e) {
    if (e.which == 13) {
        $("#mobile-menu ul").focus();
    }
});

这是html的简化版本：

 <nav id="mobile-menu" aria-label="Main Mobile Navigation">
    <div class="content">
            
        <a href="#" aria-label="Mobile Homepage Link">... logo IMG ...</a>

        <span class="heading">Navigation</span>

        <ul class="page-navigation">
            ... NAV LINKS ...
        </ul>

    </div>
 </nav>
                    
<div id="mobile-nav-trigger">
    <button class="mobile-menu-toggle" aria-label="Open Menu"></button>
</div>

我还发现，如果尝试在移动菜单中的任何位置添加tabindex，触发器将不再在按键上打开它。

我如何做到这一点，以便当触发器打开菜单时，焦点位于＃mobile-menu元素内？

解决方法

尝试了以下解决方案后：stackoverflow.com/a/15338848/1783695，这给了我一些想法...这个解决方案有效，但也可以通过单击鼠标来集中精力，我只想在专注于键盘按键。

所以我最终解决了这个问题，并且正是我所需要的：

var input = document.getElementById("mobile-menu-toggle");
input.addEventListener("keyup",function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        $('.heading.focusable')[0].focus();
    }
});

注意：我将“ focusable”和tabindex类添加到“ Navigation”标题（我们有多个“ heading”元素），以便可以集中于此：

<span class="heading focusable" tabindex="0">Navigation</span>

,

一种选择是为鼠标用户关闭焦点指示器，为键盘（TAB）用户打开焦点指示器。

您将需要在样式表中添加以下类：

body.focusIndicatorOff :focus { outline: 0; }

此样式为体内具有焦点的任何元素隐藏焦点指示符。接下来，添加以下内容：

1. 将上面显示的.focusIndicatorOff类样式添加到样式表中。
2. 将focusIndicatorOff类添加到body元素中。页面加载后，所有元素的焦点指示器都将隐藏。
3. 向body添加一个按键监听器，以监听TAB按下。
4. 在body上添加鼠标单击侦听器，以监听鼠标单击。
5. 检测到TAB按下时，从focusIndicatorOff中删除body类。这将使焦点指示器可见。
6. 检测到鼠标单击时，将focusIndicatorOff类添加到body中。这将隐藏焦点指示器。

有了该实现，请更新菜单按钮的click事件，以仅将焦点强制到“导航”菜单标题。您不必担心听那个按钮上的按键，只需要移动焦点即可。我上面描述的代码将检测用户是使用鼠标还是键盘，并隐藏或显示聚焦指示器以适应他们的需求。

最后一项：建议您在“导航”标题上使用tabindex="-1"。使用“ -1”可让您将焦点强制到元素，但不会将焦点添加到自然制表符顺序。