使用 role= 按钮将键码 32（空格键）添加到 div

Question

只有当上一个下一个按钮获得焦点时，如何才能使它起作用。目前它在 window.

上激活

HTML

<ul class="clearfix" id="pagenav">
  <li class="prev-next__item prev-next__item--prev prev-next__item--divider">
    <a class="prevBTN" role="button" rel="prev" aria-label="previous page" href="p00.html">
    Previous
    </a>
  </li>
  <li class="prev-next__item prev-next__item--next">
    <a class="nextBTN" role="button" rel="next" aria-label="next page" href="p01.html">
    Next
    </a>
  </li>
</ul>

JS

上一个下一个按钮的空格键功能

window.onkeydown = function(e) {
  "use strict";
  if (e.keyCode === 32) {
    e.preventDefault();
    document.querySelector('a.nextBTN').click();
    document.querySelector('a.prevBTN').click();
  }
};

Answer 1

试试这个：

window.onkeydown = function(e) {
  "use strict";
  if (e.keyCode === 32) {
    e.preventDefault();
    var next = document.querySelector('a.nextBTN:focus');
    var prev = document.querySelector('a.prevBTN:focus');
    if(next)
        next.click();
    if(prev)
        prev.click();
  }
};

使用 role= 按钮将键码 32（空格键）添加到 div

Adding keycode 32 (spacebar) to div with role= button

jquery

keycode