jquery - 如何为输入按钮创建键盘快捷键

Question

我正在展示一堆图片，每张图片都有自己的 HTML 页面。我有一个输入按钮，单击该按钮会将您带到图片的下一个链接。但是，我希望能够使用我的键盘箭头前进和后退。我是编码新手，不知道这是否可行。我可以使用 accesskey 对 HTML 执行此操作吗:

<input type="button" accesskey="?" value="Next Item">

或者我需要使用 JQuery 插件吗？如果有，是哪一个？

Answer 1

作为zzzzBov说明，HTML accesskey 定义了一个键，只有当它与 ALT 键组合时才会被捕获。这就是为什么它对单独捕获任何 key 没有用。

但是你必须特别小心地选择捕获光标键的事件，因为Webkit has decided not to trap them with the keypress event as it is not in the standard .目前这里的其他 3 个答案使用此 keypress 事件，这就是为什么它们在 Google Chrome 或 Safari 中不起作用，但如果您将其更改为 keydown 它们将适用于所有浏览器。

您可以使用此 jQuery 代码来捕获 left、right、up 的 keydown 事件，和 向下 箭头键:

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case 37: // left arrow key
    case 38: // up arrow key
      e.preventDefault(); // avoid browser scrolling due to pressed key
      // TODO: go to previous image
      return;
    case 39: // right arrow key
    case 40: // up arrow key
      e.preventDefault();
      // TODO: go to next image
      return;
  }
});

在以下代码片段中，您可以看到并运行一个完整的示例，其中使用按键或按钮交换图像。

var currentImage = 0;
var imagesArray = [
  'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',
  'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png'
];

function hasPrev() {
  return currentImage > 0;
}

function hasNext() {
  return currentImage < imagesArray.length - 1;
}

function goToPrev(e) {
  e.preventDefault();
  if (!hasPrev())
    return;
  currentImage -= 1;
  updateScreen();
}

function goToNext(e) {
  e.preventDefault();
  if (!hasNext())
    return;
  currentImage += 1;
  updateScreen();
}

function updateScreen() {
  $('#imgMain').attr('src', imagesArray[currentImage]);
  $('#btnPrev').prop('disabled', !hasPrev());
  $('#btnNext').prop('disabled', !hasNext());
}

$(document).ready(function() {
  updateScreen();
  $('#btnPrev').click(goToPrev);
  $('#btnNext').click(goToNext);
});

var keyCodes = {
  left: 37,
  up: 38,
  right: 39,
  down: 40
};

$(window).keydown(function(e) {
  switch (e.keyCode) {
    case keyCodes.left:
    case keyCodes.up:
      goToPrev(e);
      return;
    case keyCodes.right:
    case keyCodes.down:
      goToNext(e);
      return;
  }
});

button:enabled kbd {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnPrev">
  Previous Image
  <br/>
  <small>(arrow keys: <kbd>left</kbd> or <kbd>up</kbd>)</small>
</button>
<button id="btnNext">
  Next Image
  <br/>
  <small>(arrow keys: <kbd>right</kbd> or <kbd>down</kbd>)</small>
</button>
<br/>
<img id="imgMain" src="">

更新(2016 年 5 月)

keyCode 最近已被弃用(但我还没有找到跨浏览器的解决方案)。引用 MDN article for keyCode :

Deprecated

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

...

这不应该被新的网络应用程序使用。 IE 和 Firefox 已经(部分)支持 KeyboardEvent.key。此外，Google Chrome 和 Safari 支持 KeyboardEvent.keyIdentifier，它在 DOM 级别 3 事件的旧草案中定义。如果可以使用它们或其中之一，则应尽可能使用它们/它。