使用jQuery的键盘快捷键

时间:2009-02-27 05:22:10

标签: javascript jquery keyboard-shortcuts

如果有人按下字母 g ,如何将事件连接起来?

(所有字母BTW的字符映射在哪里?)

13 个答案:

答案 0 :(得分:139)

由于最初提出这个问题,John Resig(jQuery的主要作者)已经分叉并改进了js-hotkeys项目。他的版本可在以下网址获得:

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

答案 1 :(得分:81)

jQuery Hotkeys怎么办?

  

jQuery热键可让您在代码中的任何位置观看键盘事件,几乎支持任何组合键。

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

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

答案 2 :(得分:41)

我最近为此写了一个独立的库。它不需要jQuery,但你可以使用它与jQuery没问题。它叫做捕鼠器。

您可以在http://craig.is/killing/mice

查看

答案 3 :(得分:24)

嗯,有很多方法。但我猜你有兴趣先进 实现。几天前,我在同一个搜索中,我找到了一个。

Here.

从键盘捕获事件很有用,你也可以找到角色贴图。 好消息是...它是jQuery。检查同一页面上的演示并确定。

另一个库是here

答案 4 :(得分:15)

    <script type="text/javascript">
        $(document).ready(function(){
            $("#test").keypress(function(e){
                if (e.which == 103) 
                {
                    alert('g'); 
                };
            });
        });
    </script>

    <input type="text" id="test" />

this site says 71 = g but the jQuery code above thought otherwise

资本G = 71 ,小写字母为103

答案 5 :(得分:13)

如果您只想要简单的快捷方式(例如1个字母,例如 g ),您可以轻松地执行此操作而无需额外的插件:

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

答案 6 :(得分:8)

你也可以试试shortKeys jQuery插件。用法示例:

$(document).shortkeys({
  'g': function () { alert('g'); }
});

答案 7 :(得分:3)

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

$(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

答案 8 :(得分:1)

有一个新版本的hotKeys.js适用于1.10+版本的jQuery。它是一个小的,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 repo页面https://github.com/realdanielbyrne/HoyKeys或分叉并贡献。

答案 9 :(得分:1)

与@craig类似,我最近建立了一个快捷方式库。

https://github.com/blainekasten/shortcut.js

可链式API,支持绑定到一个快捷方式的多个函数。

答案 10 :(得分: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>

答案 11 :(得分:0)

我试图做同样的事情,经过很长一段时间我完成了这件事!这是我最终使用的代码!它的工作原理:完美!这是使用shortcuts.js库完成的!添加了一些其他按键作为示例!

只需运行代码片段,单击内部框并按 G 键!

关于 ctrl + F meta + F 的注意事项将禁用所有键盘快捷键,因此您必须在其中制作键盘快捷键同样的剧本! 键盘快捷键操作也只能在javascript中调用!

要将html转换为javascriptphpASP.net转到here! 在实时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>

答案 12 :(得分:0)

如果你想自己做,你可能应该使用“key”属性而不是“which”(即which is deprecated):

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

$("body").on('keypress', function(e){
    if('g' === e.key){
        console.log("ok");
    }
});