jquery – 如何为输入按钮创建键盘快捷方式

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

如 zzzzBov解释的，HTML访问键定义只有当它与ALT键组合时才被捕获的键。这就是为什么这对于单独捕获任何密钥都没有用。

但是你必须特别小心选择事件捕捉光标键，因为Webkit has decided not to trap them with the keypress event as it is not in the standard.此时，其他3个答案在这里使用这个按键事件，这就是为什么他们不工作在谷歌Chrome或Safari，但如果你改变到键下，他们将在所有浏览器上工作。

您可以使用此jQuery代码捕获左，右，上和下箭头键的按键事件：

$(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：

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