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

问题描述 投票：0回答：7

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

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

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

jquery html button keyboard-shortcuts
7个回答
36
投票

正如 zzzzBov 所解释的，HTML 

accesskey
定义了一个只有与 ALT 键组合时才会被捕获的键。这就是为什么这对于单独捕获任何密钥没有用处。

但是您必须特别注意选择捕获光标键的事件，因为 Webkit 已决定不使用 

keypress
事件捕获它们，因为它不在标准中。目前，这里的其他 3 个答案使用此 
keypress
事件，这就是为什么它们 不适用于 Google Chrome 或 Safari，但如果您将其更改为 
keydown
，它们将适用于所有浏览器。

您可以使用此 jQuery 代码来捕获 

left
、right、up 和 down 箭头键的 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 文章获取 keyCode：

已弃用

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

...

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

32
投票

我刚刚使用了第三方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>
9
投票

我可以使用快捷键对 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;
  }
});
2
投票

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

2
投票

我会用这个：

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

用户应该输入：shift + alt + n

1
投票

你可以这样做...

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

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

    }
});

jsFiddle.

0
投票

对于键盘快捷键，可以直接处理键盘事件

document.addEventListener('keyup', (e) => {
    const keys = e.ctrlKey ? ["ctrl"] : []
    if (e.altKey) {
      keys.push("alt")
    }
    document.querySelector(`[data-hotkey~='${keys.join('+')}']`)?.click()
})

数据热键

示例

<button data-hotkey="ctrl+z">ctrl+z</button>
<button data-hotkey="ctrl+y">ctrl+y</button>

<script>
  document.addEventListener('keyup', (e) => {
    const keys = e.ctrlKey ? ["ctrl"] : []
    if (e.altKey) {
      keys.push("alt")
    }
    keys.push(e.key)
    document.querySelector(`[data-hotkey~='${keys.join('+')}']`)?.click()
    // console.log(e.key)
  })
  
  // more test
  for (const hotkeyStr of ["u", "U", "alt+c", "alt+ArrowRight", "alt+F1"]) {
    document.body.append(document.createRange().createContextualFragment(
      `<button data-hotkey="${hotkeyStr}">${hotkeyStr}</button>`
    ))
  }

  document.querySelectorAll("button").forEach(elem => elem.onclick = (e) => {
    console.log(e.target.innerText)
  })
</script>

对于使用左右键切换图像，提供了以下方法：

  • 为图像集准备一个区域（不可见）。 
    <div style="display: none" id="db">
  • 触发左右键时，从图像集中取出对应的图像，并将当前节点放入图像集中。

<input type="button" data-hotkey="ArrowLeft" value="←">
<input type="button" data-hotkey="ArrowRight" value="→">
<output>
  <svg fill="#00ff00" width="100" height="100" ><g><circle r="10" cx="50" cy="50" ></circle></g></svg>
</output>

<div style="display: none" id="db">
  <svg fill="#0000ff"  width="100" height="100"><g><polygon points="50,20 20,80 80,80"/></g></svg>
  <svg fill="#ff00ff" width="100" height="100"><g><polygon points="50,20 20,80 80,80 90,20" /></g></svg>
</div>

<script>
  document.addEventListener('keyup', (e) => {
    const keys = e.ctrlKey ? ["ctrl"] : []
    if (e.altKey) {
      keys.push("alt")
    }
    keys.push(e.key)
    document.querySelector(`[data-hotkey~='${keys.join('+')}']`)?.click()
  })

  const imgDB = document.querySelector('#db')
  const output = document.querySelector("output")

  const [leftBtn, rightBtn] = document.querySelectorAll("[data-hotkey]")
  leftBtn.onclick = (e) => {
    const cur = document.querySelector("output svg")
    output.append([...imgDB.querySelectorAll("svg")].pop())
    // imgDB.insertAdjacentElement('afterbegin', cur) # use prepend to instead
    imgDB.prepend(cur) // https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend
  }

  rightBtn.onclick = (e) => {
    const cur = document.querySelector("output svg")
    output.append(imgDB.querySelector("svg"))
    imgDB.append(cur)
  }
</script>

使用append时，如果节点已经存在，则会被移动到下面的目标。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.