jQueryのキーボードショートカット


186

誰かが文字を押した場合にイベントを発生させるにはどうすればよいgですか?

(ところで、すべての文字の文字マップはどこにありますか?)


3
この上品なサイトのすべての文字の文字マップ:rmhh.co.uk/ascii.html
Trevor

キーコードのもう1つの便利なサイトはkeycode.infoです
npad

回答:


143

この質問はもともと質問されたため、John Resig(jQueryの主要な作成者)がjs-hotkeysプロジェクトを分岐して改善しました。彼のバージョンは次の場所にあります。

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


6
それはサポートしてmetaキーでサポートされていない何かjs-hotkeys:)おかげ
Lipis

彼はNugetパッケージを持っているので、これと一緒に行きました。
2013年

キーの組み合わせ(特に、shift、ctrl、altなどの特別なキー)には非常に適していますが、基本的なマッピング0〜9およびa〜zに問題があります。
マーティン

1
この回答は有用なリンクを提供します。元の質問にも答えてもらえますか?たとえば、「誰かが文字gを押した場合にイベントを発生させるにはどうすればよいですか?」jquery.hotkeysモジュールにはいくつかのドキュメントがありますが、あなたがすでに何をしているのかを知っているなら、きっと素晴らしいでしょう...しかし、一緒に何かをハックしようとしている私たちにとっては、元の質問に対する答えが素晴らしいでしょう。
Ian Langmore 2014

どのようにしてブラウザにデフォルトのバブリングが発生しないようにしますか?私が見たもののreadmeには何も記載されていません。
ガーナード

86

何についてのjQueryのホットキー

jQuery Hotkeysを使用すると、ほとんどすべてのキーの組み合わせをサポートするコード内の任意の場所でキーボードイベントを監視できます。

Ctrl+ cを関数(f)にバインドするには、例えば:

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

2
うわー...それはおそらく私が今まで使った中で最も簡単なプラグインです!
d -_- b 2012

これをそのまま使用しても、ブラウザのデフォルトが妨げられることはありません。したがって、Ctrl + nは、たとえばブラウザで新しいタブを開きます。イベントオブジェクトにアクセスできないため、これを使用してpreventDefaultを実行する方法がわかりません。
ガーナード

@Gurnard事前にユーザーに通知されており、Webアプリ内でその動作を期待しているまれなケースを除いて、ユーザーのデフォルトを防止することはできません(ユーザーが変更できるように設定することもできます)。そうでなければ、それは信じられないほど迷惑です。例1:Stack Exchangeで投稿を作成する場合、ブラウザを非表示にする代わりに、Cmd H## Heading ##テキストフィールドに表示します。例2この質問。 例3このQ&A
メンタリスト

2
@メンタリストUXコメントに感謝しますが、現在の状況には当てはまりません。私は、建築技術的にこれを行うことができるようにしたいとUXの決定は、別のポスト:-)だろう
Gurnard

43

最近、このためのスタンドアロンライブラリを作成しました。jQueryは必要ありませんが、jQueryで問題なく使用できます。それはネズミ捕りと呼ばれています。

http://craig.is/killing/miceで確認できます。


4
これはすごく素敵。キーのシーケンスの処理のサポートに本当に感謝しています。
lorefnon 2012

2
私はMoustrapを使用していますが、HotKeysプラグインの方がはるかに優れています。とてもお勧めです。@Cragよろしくお願いします。
プリモスローマ2013

1
ドキュメンテーションと、要素のデフォルトの動作を防ぐ方法が好きでした。このライブラリはNuGetにある必要があります。
アーミル2017年

同意した。これは優れています。jarea.hotkeyは、textareaにフォーカスがあるときに誤って起動しませんでしたが、そうではありませんでした。また、以前のコメント投稿者が言及したすべての点で優れています。
erosebe

24

多くの方法があります。しかし、私はあなたが高度な実装に興味を持っていると思います。数日前、同じ検索を行っていましたが、見つかりました。

ここに。

キーボードからイベントをキャプチャするのに適しています。キャラクターマップも見つかります。そして良いことは...それはjQueryです。同じページでデモを確認して決定してください。

代替ライブラリはこちらです。


2
明確にするために、jqueryがなくても完全に機能します。
Diff.Thinkr 2011

16

単純なショートカット(たとえば、1文字などg)だけが必要な場合は、追加のプラグインなしで簡単に実行できます。

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

2
これはIE9では機能しません。IEでは、次のようなものが機能します:e = e || window.event; var keyCode = e.keyCode || e.which;
ブレントファウスト

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


8
これを使って!if(e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
旅行

これは、テキストフィールドに焦点を当てている場合にのみ発生します
Michael Koper

リンクは死んでいます:(


3

CodeacademyでいくつかのjQueryを研究した後、キーをanimateプロパティにバインドするソリューションを見つけました。全体のアイデアは、スクロールせずにアニメーション化して、あるセクションから別のセクションにジャンプすることでした。Codeacademyの例は、DOMを介してマリオを移動することでしたが、これを自分のWebサイトセクション(高さ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

jQueryの1.10+バージョンで動作するhotKeys.jsの新しいバージョンがあります。小さな100行のjavascriptファイルです。4 kbまたは2 kbの縮小。簡単な使用例は次のとおりです。

$('#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に移動するか、フォークして投稿してください



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を変換するにはjavascriptphp、またはASP.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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.