jQueryでのエスケープキーのキーコード

2つの機能があります。Enterキーを押すと関数は正しく実行されますが、Escapeキーを押すと機能しません。エスケープキーの正しい番号は何ですか？

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

keyupイベントで試してください：

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});

関数のキーコード値をハードコードするのではなく、名前付き定数を使用して、意味をより適切に伝えることを検討してください。

var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ENTER) $('.save').click();
  if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});

一部のブラウザー（FireFoxなど、他のブラウザーでは不明）は、KeyEventこれらのタイプの定数を公開するグローバルオブジェクトを定義します。このSOの質問は、他のブラウザーでもそのオブジェクトを定義するための優れた方法を示しています。

（私の以前のコメントから抽出された回答）

keyupではなくを使用する必要がありますkeypress。例えば：

$(document).keyup(function(e) {
  if (e.which == 13) $('.save').click();     // enter
  if (e.which == 27) $('.cancel').click();   // esc
});

keypressブラウザ間で一貫して処理されていないようです（http://api.jquery.com/keypressでIEとChromeとFirefox のデモを試してください。場合によってkeypressは登録されず、 'which'と 'の両方の値がkeyCode 'は異なりますが）keyup一貫しています。

いくつかの議論があったので、e.whichVS e.keyCode注：e.whichjqueryの正規化値であり、使用のために推奨されるものであるが。

event.whichプロパティは、event.keyCodeとevent.charCodeを正規化します。キーボードのキー入力にはevent.whichを監視することをお勧めします。

（http://api.jquery.com/event.which/から）

任意のキーのキーコードを見つけるには、次の単純な関数を使用します。

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}

27エスケープキーのコードです。:)

あなたの最善の策は

$(document).keyup(function(e) { 
    if (e.which === 13) $('.save').click();   // enter 
    if (e.which === 27) $('.cancel').click(); // esc   

    /* OPTIONAL: Only if you want other elements to ignore event */
    e.preventDefault();
    e.stopPropagation();
});

概要

• whichkeyCode正規化されているためよりも
• keyupkeydownユーザーがキーを押し続けるとキーダウンが複数回発生する可能性があるため、よりも望ましいです。
• keypress実際のキャラクターをキャプチャしたい場合以外は使用しないでください。

興味深いことに、BootstrapはドロップダウンコンポーネントでkeydownとkeyCodeを使用しています（3.0.2以降）！私はそれはおそらくそこに悪い選択だと思います。

JQueryドキュメントの関連スニペット

ブラウザーはこの情報を格納するために異なるプロパティを使用しますが、jQueryは.whichプロパティを正規化するため、確実に使用してキーコードを取得できます。このコードは、矢印などの特殊キーのコードを含む、キーボードのキーに対応しています。実際のテキスト入力をキャッチするには、.keypress（）の方が適している場合があります。

その他の興味深い項目：JavaScript Keypress Library

jEscapeプラグインを試してください（Googleドライブからダウンロード）

$(document).escape(function() { 
   alert('ESC button pressed'); 
});

またはクロスブラウザのキーコードを取得します

var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');

多分あなたはスイッチを使うことができます

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}

コードは問題なく動作します。フォーカスされていない可能性が最も高いウィンドウです。同様の関数を使用してiframeボックスなどを閉じます。

$(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

});

$(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
      parent.document.getElementById('iframediv').style.display='none';
      parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

});

私は同じことをやろうとしていました、そしてそれは私のがらくたを悩ませていました。Firefoxでは、エスケープキーが押されたときに何かを行おうとすると、エスケープキーの処理が続行され、実行しようとしていたことはすべてキャンセルされます。アラートは正常に機能します。しかし、私の場合、うまくいかなかった歴史に戻りたいと思いました。最後に、以下に示すように、イベントの伝播を強制的に停止する必要があることがわかりました...

if (keyCode == 27)
{
    history.back();

    if (window.event)
    {
        // IE works fine anyways so this isn't really needed
        e.cancelBubble = true;
        e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
        // In firefox, this is what keeps the escape key from canceling the history.back()
        e.stopPropagation();
        e.preventDefault();
    }

    return (false);
}

他の答えがしていないところを説明するために; 問題はの使用ですkeypress。

おそらく、イベントの名前は間違っていますkeypressが、のときに起動するように定義されています。すなわちテキスト。 一方、/は、いつでも（それぞれ前または後）起動します。つまり、キーボード上のそれらのもの。when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

違いはここに表示されます。これescは、が制御文字（文字どおり「非印刷文字」）であり、テキストを書き込まないため、発生しませんkeypress。
enter奇妙なのは、これを制御文字として使用している（つまり、UIを制御する）場合でも、改行文字が挿入され、が起動するためkeypressです。

ソース：quirksmode

すべての文字の16進コードを取得するには：http : //asciitable.com/

e.keyCodeMDNで非推奨と見なされるよりも新しい回答を投稿するだけです。

e.key代わりに、すべてに対してクリーンな名前をサポートする代わりに選択する必要があります。こちらが関連コピーのパスタです

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

キーボード入力と入力されたキーの組み合わせをキャプチャするための堅牢なJavascriptライブラリ。依存関係はありません。

http://jaywcjlove.github.io/hotkeys/

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

：ホットキーは以下の修飾子を理解し⇧、shiftoption⌥altctrlcontrolcommandと⌘。

次の特殊キーがショートカットに使用することができます：backspacetab、clear、enter、return、esc、escape、space、up、down、left、right、home、end、pageup、pagedown、del、deleteおよびf1通過f19。

私は常にキーアップとe.whichを使用してエスケープキーをキャッチしました。

私はこの質問がjqueryについて尋ねていることを知っていますが、jqueryuiを使用している人々のために、キーコードの多くに定数があります：

$.ui.keyCode.ESCAPE

http://api.jqueryui.com/jQuery.ui.keyCode/