使用 jQuery 的键盘快捷键

如果有人按字母 ,我怎样才能将事件发送到点火?

(顺便问一下,所有字母的字符映射在哪里?)

167140 次浏览

有很多种方法,但我猜你对高级的 几天前我在同样的搜索中,我找到了一个。

给你。

它很适合从键盘捕获事件,你也可以找到字符映射。 好消息是... 它是 jQuery。检查同一页上的演示并决定。

另一个库是 给你

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


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

这个站点说71 = g,但是上面的 jQuery 代码却不这么认为

大写 G = 71小写是103

JQuery 热键呢?

JQueryHotkeys 允许您在代码中的任何地方观察键盘事件,支持几乎任何键组合。

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

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

你也可以试试 快捷键 jQuery 插件:

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

自从最初提出这个问题以来,JohnResig (jQuery 的主要作者)已经分叉并改进了 js-hotkeys 项目。他的版本可以在:

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

如果你只想要简单的快捷方式(比如1个字母,比如只有 ) ,你可以很容易地做到,不需要额外的插件:

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

我最近为此编写了一个独立库。它不需要 jQuery,但是可以和 jQuery 一起使用。这叫捕鼠器。

你可以去 http://craig.is/killing/mice看看

在 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

有一个新版本的 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或 fork 进行贡献。

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

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

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

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

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

我也想做同样的事情,我花了很长时间才做到的!这是我最后使用的代码!它的工作: 完美!这是通过使用 捷径库完成的!添加了一些其他的按键作为例子!

只要运行代码剪辑-它,点击内部框,并按下 G键!

注意在 Ctrl + FMeta + F将禁用所有的 键盘快捷键,所以你必须使键盘快捷方式在同一个脚本以及! 也只能在 javascript中调用 快捷键动作!

要将 html 转换为 javascriptphp,或 ASP.net给你! 要在活动的 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>

如果你想自己做这件事,你可能应该使用“ key”属性而不是“ which”(也就是不推荐使用的属性) :

Https://developer.mozilla.org/en-us/docs/web/api/keyboardevent/key

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

下面的简单命令可以激活 ctrl + s 键:

$(document).keydown(function (event) {
if (event.ctrlKey && event.which === 83) {
alert("Ctrl+S");
event.preventDefault();
}
});

注意: jQuery Hotkeys 插件不能正常工作