如何创建一个输入按钮的快捷键 [英] How to create a keyboard shortcut for an input button

查看：160
本文介绍了如何创建一个输入按钮的快捷键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我显示一堆图片和每个图象有它自己的HTML页面。我有一个输入按钮的onclick将带你到下一个环节的图片。不过，我希望能够用我的键盘箭头前进和背部。我是新来的编码，不知道这是可能的。我可以用ACCESSKEY做到这一点与HTML：

 ＆LT;？输入类型=按钮ACCESSKEY =值=下一个项目＆GT;

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


解决方案

作为<一个href=\"http://stackoverflow.com/questions/5061353/how-to-create-a-keyboard-shortcut-for-an-input-button/5061382#5061382\">zzzzBov解释的那样，HTML ACCESSKEY 定义，只有当它与<大骨节病> ALT 键相结合，将被困的关键。这就是为什么就是不单单捕捉任意键有用

但你要特别注意选择事件陷阱光标键，因为的Webkit已经决定不陷阱它们与键preSS 的事件，因为它不是标准。这时其他3答案在这里使用键preSS 事件，这就是为什么他们的不要在谷歌浏览器Safari浏览器也没有工作但如果您更改为的keydown ，他们会在所有浏览器。

您可以使用此jQuery的code捕捉到的<大骨节病>离开​​，<大骨节病>右键的的keydown 事件， <大骨节病>高达和<大骨节病>下箭头键：

  $（窗口）.keydown（函数（五）{
  开关（e.key code）{
    案例37：//左箭头键
    案例38：//向上箭头键
      亦即preventDefault（）; //浏览器避免滚动由于pressed关键
      // TODO：去previous图像
      返回;
    案例39：//右箭头键
    案例40：//向上箭头键
      亦即preventDefault（）;
      // TODO：去下一个图像
      返回;
  }
}）;

而在以下 code段的你可以看到并运行其中的图像是使用钥匙或按钮换一个完整的例子。

\r
\r

VAR currentImage = 0;\r
VAR imagesArray = [\r
  https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/150px-Tux.svg.png'，\r
  'https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/150px-Wikipedia-logo-v2.svg.png',\r
  https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Git-logo.svg/150px-Git-logo.svg.png\r
];\r
\r
函数preV（）{\r
  返回currentImage＆GT; 0;\r
}\r
\r
功能规则hasNext（）{\r
  返回currentImage＆LT; imagesArray.length - 1;\r
}\r
\r
功能GOTO preV（E）{\r
  亦即preventDefault（）;\r
  如果（！有preV（））\r
    返回;\r
  currentImage - = 1;\r
  updateScreen（）;\r
}\r
\r
功能goToNext（五）{\r
  亦即preventDefault（）;\r
  如果（！规则hasNext（））\r
    返回;\r
  currentImage + = 1;\r
  updateScreen（）;\r
}\r
\r
功能updateScreen（）{\r
  $（'＃imgMain'）ATTR（'src'中，imagesArray [currentImage]）。\r
  $（'＃BTN preV）丙（禁用，有preV（）！）;\r
  $（'＃btnNext'）丙（禁用，规则hasNext（）！）。\r
}\r
\r
$（文件）。就绪（函数（）{\r
  updateScreen（）;\r
  $（'＃BTN preV）点击（GOTO preV）。\r
  $（'＃btnNext'）点击（goToNext）。\r
}）;\r
\r
VAR键codeS = {\r
  左：37，\r
  达：38，\r
  右：39，\r
  下来：40\r
};\r
\r
$（窗口）.keydown（函数（五）{\r
  开关（e.key code）{\r
    案例关键codes.left：\r
    案例关键codes.up：\r
      GOTO preV（E）;\r
      返回;\r
    案例关键codes.right：\r
    案例关键codes.down：\r
      goToNext（E）;\r
      返回;\r
  }\r
}）;

\r

键：启用大骨节病{\r
  颜色：绿色;\r
  字体重量：大胆的;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;按钮ID =BTN preV＆GT;\r
  previous图片\r
  ＆LT; BR /＆GT;\r
  ＆LT;小＆GT;（箭头键：LT;大骨节病＆GT;左＆LT; /骨节病＆gt;或＆LT;大骨节病＆GT;最多＆LT; /大骨节病和GT;）＆LT; /小＆GT;\r
＆LT; /按钮＆GT;\r
＆LT;按钮ID =btnN​​ext＆GT;\r
  下一个图像\r
  ＆LT; BR /＆GT;\r
  ＆LT;小＆GT;（箭头键：LT;大骨节病＆GT;右LT; /骨节病＆gt;或＆LT;大骨节病＆GT;向下LT; /大骨节病和GT;）＆LT; /小＆GT;\r
＆LT; /按钮＆GT;\r
＆LT; BR /＆GT;\r
＆LT; IMG ID =imgMainSRC =＆GT;

\r

\r
\r

更新（2016年5月）

键code 有pcated最近去$ P $（但我还没有找到一个跨浏览器的解决方案还）。引用 MDN文章重点code ：


  

    

德precated


    
    

此功能已经从Web标准中删除。虽然一些浏览器可能仍然支持它，它是在被丢弃的过程。不要在旧的或新的项目中使用它。使用它的页面或Web应用程序可以在任何时候中断。


  
  
  

...


  
  

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


I am showing a bunch of pictures and each picture has its own HTML page. I have an input button that onclick will take you to the next link for the picture. However, I want to be able to use my keyboard arrows to go forward and back. I am new to coding and don't know if this is possible. Can I do this with HTML using the accesskey:

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

Or do I need to use a JQuery plugin? If so, which one?

解决方案

As zzzzBov explained, the HTML accesskey defines a key that will be trapped only when it is combined with the ALT key. That is why that is not useful for trapping any key alone.

But you have to take special care choosing the event to trap the cursor keys because Webkit has decided not to trap them with the keypress event as it is not in the standard. At this moment the other 3 answers here use this keypress event and that is why they don't work in Google Chrome nor Safari, but if you change that to keydown they'll work on all browsers.

You can use this jQuery code to capture the keydown event of the left, right, up, and down arrow keys: 

$(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;
  }
});

And in the following code snippet you can see and run a complete example in which images are swapped using the keys or the buttons.

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="">

UPDATE (May 2016)

keyCode has recently been deprecated (but I haven't found a cross-browser solution yet). Quoting 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.

...

This shouldn't be used by new web applications. IE and Firefox already (partially) support KeyboardEvent.key. Also, Google Chrome and Safari support KeyboardEvent.keyIdentifier which is defined in the old draft of DOM Level 3 Events. If you can use them or one of them, you should use them/it as far as possible.

这篇关于如何创建一个输入按钮的快捷键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆