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

Question

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

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

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

Answer 1

正如zzzzBov所解释的那样,HTML accesskey定义了一个仅在与ALT密钥组合时才会被捕获的密钥.这就是为什么单独捕获任何密钥都没有用.

但是你必须特别注意选择事件来捕获光标键,因为Webkit决定不将它们与keypress事件一起捕获,因为它不在标准中.此时此处的其他3个答案都使用此keypress事件,这就是为什么它们无法在Google Chrome或Safari中运行,但如果您将其更改为可keydown在所有浏览器上运行.

您可以使用此jQuery代码捕获keydown的事件left,right,up,和down箭头键:

$(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最近已被弃用(但我还没有找到跨浏览器的解决方案).引用keyCode的MDN文章:

弃用

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

...

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

Answer 2

我刚刚使用了第三方shortcut.js.这非常友好.你可以参考它.

<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使用HTML执行此操作:

不,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;
  }
});