630

重複の可能性：
jQueryを使用したエスケープキーのキーコード

IE、Firefox、Chromeでエスケープキーの押下を検出するにはどうすればよいですか？以下のコードはIEとアラート27で機能しますが、Firefoxではアラートを出します0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});
4

10 に答える 10

1123

注:keyCodeは非推奨になりつつkeyあります。代わりに使用してください。

function keyPress (e) {
    if(e.key === "Escape") {
        // write your logic here.
    }
}

コードスニペット：

var msg = document.getElementById('state-msg');

document.body.addEventListener('keypress', function(e) {
  if (e.key == "Escape") {
    msg.textContent += 'Escape pressed:'
  }
});
Press ESC key <span id="state-msg"></span>

keyCode非推奨になりつつある

動作しない場合がありますが、動作するkeydownようですkeyupkeypress

$(document).keyup(function(e) {
     if (e.key === "Escape") { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

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

于 2010-07-30T07:59:49.363 に答える
256

このkeydownイベントは Escape で正常にkeyCode機能し、すべてのブラウザーで使用できるという利点があります。documentまた、ボディではなくリスナーをアタッチする必要があります。

2016 年 5 月の更新

keyCodeは現在非推奨であり、最新のブラウザのほとんどがこのkeyプロパティを提供していますが、現時点では適切なブラウザ サポートのためのフォールバックが必要です (執筆時点では、Chrome と Safari の現在のリリースではサポートされていません)。

2018 年 9 月の更新 evt.keyは、最新のすべてのブラウザーでサポートされるようになりました。

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        alert("Escape");
    }
};
Click me then press the Escape key

于 2010-07-30T08:18:27.793 に答える
18

keyCode&&＆を確認してくださいwhich||keyupkeydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});
于 2010-07-30T07:57:02.257 に答える
12

以下は、ESCキーを無効にするだけでなく、押された状態をチェックし、状況に応じてアクションを実行するかどうかをチェックするコードです。

この例では、

e.preventDefault();

ESC キーを押すアクションを無効にします。

これでdivを非表示にするようなことをすることができます:

document.getElementById('myDivId').style.display = 'none';

ESC キーが押された場所も考慮されます。

(e.target.nodeName=='BODY')

これをすべてに適用したい場合は、この if 条件部分を削除できます。または、ここで INPUT をターゲットにして、カーソルが入力ボックスにあるときにのみこのアクションを適用することもできます。

window.addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
        e.preventDefault();
        return false;
    }
}, true);
于 2017-01-03T04:07:58.960 に答える
3

最も簡単な方法はバニラJavaScriptだと思います：

document.onkeyup = function(event) {
   if (event.keyCode === 27){
     //do something here
   }
}

更新: key => keyCode を変更

于 2016-11-30T22:08:45.393 に答える