Question

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

我试图使用键盘替代方案来获得相同的行为。截至目前，信息按钮再次打开信息文本框，当我点击＆＃34;输入＆＃34;键。但是，当我第二次按下回车键时，信息框没有关闭，它仍会显示。

当前代码：

//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来测试它，我建议尝试两件事：

我在这里看不到任何将焦点移动到按钮的位置。没有获得焦点，按钮不会被触发。这意味着您必须听取整个文档的按键操作。
使用<button>而不是<image role=button>，因为role不提供键盘支持（您必须将其全部编写脚本）。

模态的大多数问题（正如你所描述的那样）归结为键盘焦点。我有一个modal example pen来自另一个显示焦点管理的东西。当您激活模态时，您将看到可以按Enter键来打开，关闭，打开，关闭等等。这可以通过管理焦点来实现。

Answer 2

这应该有用。

$(document).ready(function() {
    $(document).bind('keydown',function(e){
       if(e.keyCode === 13 || e.charCode === 32) {
          showHelp();
       }
    });
});

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

2 个答案: