jQuery Event Keypress：どのキーが押されましたか？

706

jQueryで、keypressイベントにバインドするときに押されたキーを確認するにはどうすればよいですか？

$('#searchbox input').bind('keypress', function(e) {});

ENTERが押されたときに送信をトリガーしたい。

[更新]

私は自分自身（またはそれ以上：1つ）の答えを見つけましたが、変化の余地があるようです;）

keyCodeとwhich-の間に違いはありENTERますか？特に私が単に探している場合は、Unicodeキーにはなりませんか？

一部のブラウザは1つのプロパティを提供し、他のブラウザは他のプロパティを提供しますか？

javascript  jquery  events  bind  keypress 
— BlaM
ソース
295
**誰かがGoogleからこれに到達した場合（私と同じように）、「keypress」の代わりに「keyup」がFirefox、IE、およびChromeで機能することを知ってください。"keypress"はFirefoxでのみ機能するようです。
— タイラー
17
また、「keydown」は、キーが押された後のイベントをトリガーするための「keyup」よりもうまく機能します（もちろん）、テキスト領域が空の場合に2番目のバックスペースでイベントをトリガーする場合、これは重要です
— Tyler
12
e.keyCode VS e.whichと同様に...私のテストでは、ChromeとIE8：keypress（）ハンドラーは通常の文字（つまり、Up / Down / Ctrlではない）に対してのみトリガーされ、e.keyCodeとeの両方に対してトリガーされます。これはASCIIコードを返します。ただし、Firefoxでは、すべてのキーがkeypress（）をトリガーしますが、通常の文字の場合、e。はASCIIコードを返し、e.keyCodeは0を返し、特殊文字（たとえば、上/下/ Ctrl）の場合はe.keyCodeを返します。キーボードコード、およびe.whichは0を返します。
— jackocnr 2010年
4
警告：グーグルコードからのものを使用しないでください。jqueryの作者はパッチを提出しました。これはgithubリポジトリ（およびJohn Resigのフォークも）にのみあります：github.com/tzuryby/jquery.hotkeys。同じdomノードに複数のキーイベントをバインドすると、googleコードの1つが正しく動作しません。新しいものはそれを解決します。
— ダニエルリベイロ
4
"keyup"は、例えば長い間キーを押すと、非常に遅くトリガーされます。ここでjsbin.com/aquxit/3/editを参照してください。キーダウンが進むべき道です
— Toskan

回答:

844

実際にはこれが良いです：

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
— エラン・ガルペリン
ソース
84
if（（e.keyCode || e.which）== 13）？;）
— Kezzer
49
このページのさらに下のコメントによると、jQueryは正規化されるため、毎回「どれ」がイベントオブジェクトで定義されます。したがって、「keyCode」のチェックは不要です。
— Ztyx
197
なぜ莫大な賛成票があるのですか？問題は、jQueryについてです。jQueryはこれを正規化するため、使用しているe.whichイベントに関係なく、以外のものを使用する必要はありません。
— Tim Down
48
@Tim：ああ、私はちょうど使用してFirefoxでこれをテストしapi.jquery.com/keypressを：私は押したときに、<Tab>を、e.which（遺体設定されていない0）が、e.keyCode（あります9）。stackoverflow.com/questions/4793233/…なぜこれが重要なのかを参照してください。
— Marcel Korpel、2011年
3
@Marcel：はい、jQueryのキー処理には欠点があり、それは残念な例ですが、この質問で尋ねられているEnterキーの場合、状況は非常に単純です。
— Tim Down、
133

これを試して

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
— ウラジミール・プルドニコフ
ソース
5
@VladimirPrudnikovああ、ああ、ああ！ああ！そのリンクにはマックの至る所がありました-人類!!!
— Ben DeMott 2012
1
さて、私たちはWindowsアプリでも新しいバージョンをリリースしました。snippets.meを
— Vladimir Prudnikov
2
@VladimirPrudnikov Linuxバージョンはどうですか？
— Arda
@Arda Linuxバージョンの予定はありません。WebアプリとパブリックAPIがあるので、誰かが作成するかもしれません:)
— Vladimir Prudnikov '13
1
Linuxの計画がない開発者ツール。リッチ！
— Ziggy、
61

jQuery UIを使用している場合は、一般的なキーコードの翻訳があります。では、UI / UI / ui.core.js：

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

tests / simulate / jquery.simulate.jsにもいくつかの翻訳がありますが、コアJSライブラリには何も見つかりませんでした。気をつけて、私は単にソースをgrepしました。多分これらの魔法の数を取り除くためにいくつかの他の方法があるでしょう。

String.charCodeAtおよび.fromCharCodeを使用することもできます。

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
— user35612
ソース
13
訂正* $。ui.keyCode.ENTER **は* $。keyCode.ENTERではありません -チップのthxは魅力のように機能します！
— daniellmb 2009
Uncaught TypeError: String.charCodeAt is not a function私はあなたが言うつもりだったと思う'\r'.charCodeAt(0) == 13
— パトリックロバーツ
39

jQueryを使用している場合、絶対に.whichを使用する必要があります。はい、異なるブラウザは異なるプロパティを設定しますが、jQueryはそれらを正規化し、それぞれの場合に.which値を設定します。http://api.jquery.com/keydown/にある文書を参照してください：

どのキーが押されたかを判断するには、ハンドラー関数に渡されるイベントオブジェクトを調べます。ブラウザーはこの情報を格納するために異なるプロパティを使用しますが、jQueryは.whichプロパティを正規化するので、キーコードを取得するために確実に使用できます。

— フランク・シュヴィーターマン
ソース
2
event.whichを使用して$ .ui.keyCodeと比較しようとすると、動作が不確かになります。特に小文字の[L]キーは、$。ui.keyCode.NUMPAD_ENTERにマップされます。可愛い。
— Danny
4
このバグを示す再現はありますか？作業を再実装するのではなく、jQueryの所有者に報告することをお勧めします。
— フランクSchwieterman、2011年
31

...この例では、フォームの送信を禁止しています（通常、キーストローク＃13をキャプチャするときの基本的な意図）：

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
— user184365
ソース
28

編集：これはIEでのみ機能します...

これは古い投稿だと思いますが、誰かがこれを役にたつかもしれません。

キーイベントはマッピングされているため、キーコード値を使用する代わりに、キー値を使用して少し読みやすくすることもできます。

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

これは私がこのブログから得たマッピングされたキーのチートシートです ここに画像の説明を入力してください

— ケビン
ソース
5
e.keyプロパティはありません。
— SLaks 2013
3
うーん、IE固有のプロパティのようです。IEのアプリでは機能しますが、Chromeでは機能しません。キーコードを使用していると思います。
— ケビン
28 
 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });
— ルカ・フィロソフィ
ソース
1
これが本当の答えです。1は、いくつかのキーのために動作します（のように入力します）が、他の人のために失敗します受け入れ（で誤解されますsuprのように。）
— オスカー・フォーリー
19
これはjQueryソースからの直接貼り付けであり、jQueryが.whichイベントプロパティを正規化するために使用するコードです。
— イアンクレランド
@Ian Clelland：私はあなたの要点を理解できません、これは正しく機能していますか？笑
— ルカ・フィロソフィ2010年
13
それは機能します。jQueryはそのコードを正確に使用しているので、私はそれは確信しています:)すでにjQueryが利用可能な場合は、それを使用してください-これを独自のコードに含める必要はありません。
— Ian Clelland、2010年
1
@aSeptik：質問は「jQueryがあります。どのようにしてキーを押すのですか」でした。あなたの答えは、jQueryが最初にそれを取得する方法を示しています。私の要点は、jQueryにはすでにこのコード行が含まれているため、彼はそれを必要としないということです。彼はただ使うことができますevent.which。
— Ian Clelland、2013
14 
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

これがあなたに役立つことを願っています!!!

12

これは、ほぼ完全なkeyCodesのリストです。

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
— イワン
ソース
5

この行でソリューションコードを補足しますe.preventDefault();。フォームの入力フィールドの場合、Enterキーを押したときに提出するために出席しません

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
— dzona
ソース
4

非表示の送信を追加します。非表示のタイプではなく、style = "display：none"を指定した単純な送信を追加します。次に例を示します（コードから不要な属性を削除）。

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

Enterキーをネイティブに受け入れます。JavaScriptは必要なく、すべてのブラウザーで機能します。

— ペジャ
ソース
4

魔女;）

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

デモ：http : //jsfiddle.net/molokoloco/hgXyq/24/

— モロコロコ
ソース
4

使用する event.keyと最新のJS！

番号コードはもうありません。キーを直接確認できます。たとえば"Enter"、"LeftArrow"、"r"、または"R"。

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozillaドキュメント

サポートされているブラウザ

— ギボルト
ソース
3 
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

コンソールで結果を表示するには、firbugが必要です

— マニー
ソース
3

一部のブラウザーはkeyCodeを使用し、他のブラウザーはそれを使用します。jQueryを使用している場合は、jQueryが標準化したものとして確実に使用できます。実は

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
— Hitesh Modha
ソース
2

キリアンの答えによると：

場合のみ入力してキーを押しは重要です。

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>
2

私が行う最も簡単な方法は次のとおりです。

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
— ロドルフォホルヘネメールノゲイラ
ソース
1
のevent.which代わりに使用することをお勧めしますevent.keyCode。jQuery APIから：The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
— zanetu
2

簡単なkeypressイベントを可能にするjQueryのプラグインを作成しました。番号を見つけて入力する代わりに、これを行うだけです。

それの使い方

  1. 以下のコードを含めます
  2. このコードを実行します。
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

とても簡単です。は数値でtheKeyYouWantToFireAPressEventForはなく文字列です（たとえば"a"、Aが押されたとき"ctrl"に発火する、が押されたときに発火する、または数値の場合は引用符なし）。CTRL (control)11が押されたます）。

例/コード：

コードスニペットを表示

長いバージョンはとても長いので...まあ...長いので、PasteBinリンクを作成しました：http ://pastebin.com/VUaDevz1

— ザック・バーハム
ソース
何百万もの「if」比較を使用しない場合は、関数を大幅に短縮および高速化できます-> jsfiddle.net/BlaM/bcguctrx-また、たとえば-openbracketとclosebracketは、ドイツ語キーボード `。
— BlaM 2015
私はこのソリューションが好きでした。いいね。
— Jay
0

event.keyCodeそしてevent.whichdepracatedされています。上記の@Gibolt回答を参照するか、ドキュメントを確認してください：https ://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

event.key 代わりに使用する必要があります

keypressイベントも非推奨になりました：https ://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

— バクラル
ソース
-9

これを試して：

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
— オマール・イエペス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.