jQuery的键盘快捷键


Answers:


142

自从最初提出这个问题以来,John Resig(jQuery的主要作者)就分叉并改进了js-hotkeys项目。他的版本可在以下位置获得:

http://github.com/jeresig/jquery.hotkeys


6
它支持meta密钥,这是不支持的js-hotkeys:)谢谢
Lipis

他有一个Nuget包,所以我选择了这个。
对齐

我必须说,这对于键组合非常有用(特别是那些特殊的键,例如shift,ctrl,alt等),但是我在使用基本映射0-9和az时遇到了麻烦。
马丁

1
这个答案确实提供了有用的链接。您还能回答最初的问题吗?例如,“如果有人按下字母g,我该如何触发事件”?jquery.hotkeys模块具有一些文档,如果您已经知道自己在做什么,我相信这是非常好的...但是对于我们这些试图一起破解某些东西的人来说,对原始问题的答案将是很好的。
伊恩·兰摩尔

如何防止默认气泡冒充浏览器?从我所见,自述文件中未提及任何内容。
古纳德

85

什么jQuery的热键

jQuery Hotkeys使您可以在代码中的任何位置监视键盘事件,从而支持几乎任何按键组合。

要将Ctrl+ 绑定c到函数(f),例如:

$(document).bind('keydown', 'ctrl+c', f);

2
哇...这可能是我用过的最简单的插件!
d -_- b

开箱即用,它不会阻止浏览器默认设置。因此,例如,Ctrl + n将在浏览器中打开一个新选项卡。无法访问事件对象,因此不确定如何防止此事件发生。
古纳德

@Gurnard我们可能不应该阻止用户默认设置,除非在极少数情况下已事先将其传达给用户,并且他们期望Web应用程序中有该行为(并可能提供设置以供他们更改)。否则令人讨厌。示例1:在Stack Exchange上撰写帖子时,Cmd H## Heading ##显示在文本字段中,而不是隐藏浏览器。例子2这个问题。 示例3此问答
心理学家

2
@Mentalist我感谢UX注释,但它不适用于我们当前的情况。我只是想能够从技术上做到这一点,架构和UX决策将是另一篇文章:-)
Gurnard,

43

我最近为此编写了一个独立的库。它不需要jQuery,但是您可以将它与jQuery一起使用没问题。它称为捕鼠器。

您可以在http://craig.is/killing/mice上进行检查


4
很好 我非常感谢对键序列处理的支持。
lorefnon 2012年

2
我正在使用Moustrap,并发现它比HotKeys插件更好。非常推荐。@Crag感谢您的出色工作。
Primoz罗马

1
我喜欢文档以及防止元素默认行为的方法。该库应位于NuGet上。
阿米尔2015年

同意 这是优越的。当textarea为我聚焦时,jquery.hotkey不会错误地触发,但事实并非如此。同样,在以前的评论者提到的所有方面都更好。
erosebe

24

好吧,有很多方法。但是我想您对高级实现感兴趣。几天前,我进行了同样的搜索,结果找到了一个。

这里。

这对于从键盘捕获事件很有用,您也会找到字符映射。好东西是...它是jQuery。检查同一页面上的演示并决定。

一个替代库在这里


2
只是为了清楚起见,它在没有jquery的情况下也能完美运行。
Diff.Thinkr 2011年

16

如果您只需要简单的快捷方式(例如1个字母,例如just g),则无需额外的插件即可轻松实现:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});

2
这在IE9中不起作用。在IE中,类似这样的方法有效:e = e || window.event; var keyCode = e.keyCode || e。其中
布伦特·浮士德



3

在Codeacademy学习了一些jQuery之后,我找到了一种将键与animate属性绑定的解决方案。整个想法是制作动画而不滚动以从一个部分跳到另一部分。Codeacademy的示例是通过DOM移动Mario,但我将其应用于网站部分(高度为100%的CSS)。这是代码的一部分:

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 39:
            $('section').animate({top: "-=100%"}, 2000);
            break;
        case 37:
            $('section').animate({top: "+=100%"}, 2000);
            break;
        default:
            break;
    }
});

我认为您可以将其用于任何信件和财产。

来源:http//www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

有一个新版本的hotKeys.js可与jQuery 1.10+版本一起使用。它是100行的小型javascript文件。缩小4kb或2kb。以下是一些简单的用法示例:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
            doSomethingWithaParameter('Daniel');
        });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

从github克隆仓库:https : //github.com/realdanielbyrne/HoyKeys.git 或转到github仓库页面https://github.com/realdanielbyrne/HoyKeys或fork并贡献。



1

我让你按键了!这是我的代码:

<h1>Click inside box and press the g key! </h1>
 <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
<script>

 shortcut.add("g",function() {
	alert("Here Is Your event! Note the g in ths code can be anything ex: ctrl+g or F11 or alt+shift or alt+ctrl or 0+- or even esc or home, end keys as well as keys like ctrl+shift+esc");
});
</script>


0

我正在尝试做完全相同的事情,很长一段时间后我做到了!这是我最终使用的代码!它的工作原理:完美!这是通过使用shortcuts.js库完成的!添加了其他一些按键示例!

只需运行代码snip-it,在内部框内单击,然后G按键!

请注意ctrl+Fmeta+F,这将禁用所有功能,keyboard shortcuts因此您还必须在同一脚本中使用键盘快捷键!也keyboard shortcut只能调用动作javascript

要转换的HTML javascriptphpASP.net这里!要keyboard shortcuts在现场JSFIDDLE中查看我的所有内容,请点击此处!

更新资料

    <h1>Click inside box and press the <kbd>G</kbd> key! </h1>
     <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
    <script>

     shortcut.add("g",function() {
        alert("Here Is Your event from the actual question! This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+g",function() {
        alert("Here Is Your event from the actual question accept it has ctrl + g instead!! This Is where you replace the command here with your command!");
shortcut.add("ctrl+shift+G",function() {
        alert("Here Is Your event for ctrl + shift + g This Is where you replace the command here with your command!");
    });
shortcut.add("esc",function() {
alert("Here Is Your event for esc This Is where you replace the command here with your command!");
    });
//Some MAC Commands
shortcut.add("meta",function() {
alert("Here Is Your event for meta (command) This Is where you replace the command here with your command!");
    });
shortcut.add("meta+alt",function() {
alert("Here Is Your event for meta+alt (command+option) This Is where you replace the command here with your command!");
    });
    </script>
shortcut.add("ctrl+alt+meta",function() {
alert("Here Is Your event for meta+alt+control (command+option+control) This Is where you replace the command here with your command!");
    });
//& =shift +7
shortcut.add("meta+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for meta+alt (command+option+more!) This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for ctrl+alt+More!!! This Is where you replace the command here with your command!");
    });
//Even try the F keys so on laptop it would be Fn plus the F key so in my case F5!
shortcut.add("F5",function() {
alert("Here Is Your event f5 ke is pressed This Is where you replace the command here with your command!");
    });
//Extra...My Favourite one: CTRL+F
<script>
//Windows

 shortcut.add("Ctrl+F",function() { //change to meta+F for mac!
    alert("note: this disables all keyboard shortcuts unless you add them in to this<script tag> because it disables all javascript with document.write!");

document.writeln(" <link href=\"https://docs.google.com/static/document/client/css/3164405079-KixCss_ltr.css\" type=\"text/css\" rel=\"stylesheet\"> ");
document.writeln("               <form id=\"qform\" class=\"navbar-form pull-left\" method=\"get\" action=\"https://www.google.com/search\" role=\"search\"> "); 
document.writeln("  ");
document.writeln("  ");

document.writeln(" <input type=\"hidden\" name=\"domains\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> "); 
document.writeln("              <input type=\"hidden\" name=\"sitesearch\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> ");

document.writeln(" <div id=\"docs-findbar-id\" class=\"docs-ui-unprintable\"name=\"q\" type=\"submit\"><div class=\"docs-slidingdialog-wrapper\"><div class=\"docs-slidingdialog-holder\"><div class=\"docs-slidingdialog\" role=\"dialog\" tabindex=\"0\" style=\"margin-top: 0px;\"><div id=\"docs-slidingdialog-content\" class=\"docs-slidingdialog-content goog-inline-block\"><div class=\"docs-findbar-content\"><div id=\"docs-findbar-spinner\" style=\"display: none;\"><div class=\"docs-loading-animation\"><div class=\"docs-loading-animation-dot-1\"></div><div class=\"docs-loading-animation-dot-2\"></div><div class=\"docs-loading-animation-dot-3\"></div></div></div><div id=\"docs-findbar-input\" class=\"docs-findbar-input goog-inline-block\"><table cellpadding=\"0\" cellspacing=\"0\" class=\"docs-findinput-container\"><tbody><tr><td class=\"docs-findinput-input-container\"><input aria-label=\"Find in document\" autocomplete=\"on\" type=\"text\" class=\"docs-findinput-input\" name=\"q\" type=\"submit\"  placeholder=\"Search Our Site\"></td><td class=\"docs-findinput-count-container\"><span class=\"docs-findinput-count\" role=\"region\" aria-live=\"assertive\" aria-atomic=\"true\"></span></td></tr></tbody></table></div><div class=\"docs-offscreen\" id=\"docs-findbar-input-context\">Context:<div class=\"docs-textcontextcomponent-container\"></div></div><div role=\"button\" id=\"docs-findbar-button-previous\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled\" aria-label=\"Previous\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"docs-findbar-button-next\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled\" aria-label=\"Next\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow\" tabindex=\"0\" data-tooltip=\"More options\" aria-label=\"\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div></div></div><div class=\"docs-slidingdialog-close-container goog-inline-block\"><div class=\"docs-slidingdialog-button-close goog-flat-button goog-inline-block\" aria-label=\"Close\" role=\"button\" aria-disabled=\"false\" tabindex=\"0\" style=\"user-select: none;\"><div class=\"goog-flat-button-outer-box goog-inline-block\"><div class=\"goog-flat-button-inner-box goog-inline-block\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\"></div></div></div></div></div></div></div><div tabindex=\"0\" style=\"position: absolute;\"></div></div></div></div> ");
document.writeln(" <a href=\"#\" onClick=\"window.location.reload();return false;\"></a> "); 
document.writeln("  ");
document.writeln("                </form> "); 
document.writeln("  ");
document.writeln(" <h1> Press esc key to cancel searching!</h1> ");
  document.addEventListener('contextmenu', event => event.preventDefault());


  shortcut.add("esc",function() {
    alert("Press ctrl+shift instead!");
  location.reload();

  
});
});
</script>
 
// put all your other keyboard shortcuts again below this line!

//Another Good one ...Ctrl+U Redirect to alternative view source! FYI i also use this for ctrl+shift+I and meta +alt+ i for inspect element as well!
  shortcut.add("meta+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
 shortcut.add("ctrl+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
    </script>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.