Question

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

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

或者我是否需要使用JQuery插件？如果是这样，哪一个？

Answer 1

正如zzzzBov所解释的那样，HTML accesskey定义了一个仅在与 ALT 键组合时才会被捕获的键。这就是为什么无法单独捕获任何密钥。

但是你必须特别注意选择事件来捕获光标键，因为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：

已过时

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。


...

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

Answer 2

我刚刚使用了第三方shortcut.js。这非常友好。你可以reference。

<script type="text/javascript" src="js/shortcut.js"></script>

<script>
    shortcut.add("alt+s", function() {
        // Do something
    });   
    shortcut.add("ctrl+enter", function() {
        // Do something
    }); 
</script>

Answer 3

我可以使用accesskey执行此操作：

不，accesskey与 alt

一起使用

所以accesskey="a"会使 Alt + A 成为捷径。

或者我需要使用jQuery插件吗？

不，你可以使用普通的旧javascript; jQuery也有效。

$(window).keypress(function(e){
  var code = e.which || e.keyCode;
  switch ( code )
  {
    case 43:
      //do stuff
      return false;
    default:
      break;
  }
});

Answer 4

我在jsFiddle中做了示例，它使用向上和向下箭头键，因此它分别聚焦下一个或上一个输入控件。看看

Answer 5

我会用这个：

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

用户应输入：shift + alt + n

Answer 6

你可以这样做......

$(window).keypress(function(event) {
    switch (event.keyCode) {

    case 37:
        prev();
        break;
    case 39:
        next();
        break;

    }
});

jsFiddle

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

6 个答案:

更新（2016年5月）

已过时