Question

如果用户按下enter键（并且按钮处于焦点位置），则按钮处于打开状态。但是当用户按空格按钮时我也想打开链接按钮。

预计将使用Space键触发按钮，而预期链接将通过Enter键触发。换句话说，当链接用于表现像按钮时，单独添加role =“button”是不够的。还需要添加一个侦听Space键的键事件处理程序，以便与本机按钮保持一致怎么做？

  <a tabindex="0" title="Show project filter" class="button button-image img-button-select" role="button" aria-disabled="false" aria-controls="divFilterDetails" href="#"></a>

Answer 1

您应该使用keypress事件。样本here。

Answer 2

我找到了解决方案。

    $(document).ready(function () {
        //Add keypress event on every link where exist role="button"
        $(document).on('keypress', 'a[role="button"]', null, onKeypressButton, false);
    });


function onKeypressButton(e) {
    //Need both, 'keyCode' and 'which' to work in all browsers.
    var code = e.keyCode || e.which,
        spaceKey = 32;
    //If user press space key:
    if (code == spaceKey) {
        //Do same thing as onclick:
        $(e.currentTarget).click();
        e.preventDefault();
        e.stopImmediatePropagation();
   }
}

如何添加侦听Space键的键事件处理程序？

2 个答案: