javascript - 如何使用键盘控件创建切换按钮？

Question

我有一个简单的信息按钮。单击此按钮时，它会打开一个信息文本框，当您再次单击该按钮时，该信息框会消失，或“切换关闭”。

我正在尝试使用键盘替代方案来实现相同的行为。截至目前，当我按下“回车”键时，信息按钮再次打开信息文本框。但是，当我第二次按 Enter 键时，信息框不会关闭，它仍然显示。

当前代码:

//HTML
    <h2 class="tile-header">CCIR</h2>
        <span> 
            <img
            role="button"
            id="cis-info-button"
            aria-labeledby="Information for ccir Summary"
                ng-click="vm.showHelp()"
                ng-keydown="vm.keyHelp ($event)"
            class="info-icon"
            ng-src="{{infosrc_ccir}}"
            alt="ccir Summary Information"
            width="10" height="10">
        </span>      

//JS

  function showHelp()
    {
        var helpConfig =
            {
                animation: true,
                templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummaryInfo.html',
                size: 'ccir-summary-help'
            };
        $modal.open(helpConfig);
    }

    function keyHelp(e)
    {
        if (e.keyCode === 13 || e.charCode === 32)
        {
            showHelp();
        }
    }

Answer 1

如果没有 URL 来测试它，我建议尝试以下两件事:

1. 我在这里没有看到任何将焦点移至按钮的内容。如果没有获得焦点，按钮就不会被触发。这意味着您必须监听整个文档上的按键。

2. 使用<button>而不是<image role=button>作为role不提供键盘支持(您必须编写全部脚本)。

模态的大多数问题(如您所描述的)都归结为键盘焦点。我有一个modal example pen从另一件事可以看出焦点管理。当您激活模式时，您将看到可以按 Enter 键来打开、关闭、打开、关闭等。只需管理焦点就可以实现这一点。