如何检测按下了Esc键？

Question

如何在IE、Firefox和Chrome中检测Esc键按下？ 下面的代码在IE中有效，并弹出“27”，但在Firefox中弹出“0”。

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

- Mithun Sreedharan

---

首先进行一些浏览器检测吗？ - ina

我发现quirksmode.org网站一直是一个可靠的资源，可以了解哪些浏览器支持哪些功能：http://www.quirksmode.org/js/keys.html。在这里，您可以找到只有使用`keyup`或`keydown`与`keyCode`组合才能在所有浏览器中起作用的信息。 - Felix Kling

我认为这个问题的标题应该是“如何使用jquery检测escape键按下？”或者答案应该用本地的javascript... - Wilt

$(document).on("keyup", function (e) {var code = e.keyCode || e.which; alert('按下的键：' + code);}); 问候来自2014年 - Kalle H. Väravas

可能是使用jQuery的Escape键的哪个键码的重复问题。 - Cœur

已弃用/不安全 -> 应使用 e.key == "Escape" - undefined

Answer 1

注意：keyCode正在被弃用，请使用key代替。

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

代码片段：

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

document.body.addEventListener('keydown', function(e) {
  if (e.key == "Escape") {
    msg.textContent += 'Escape pressed:'
  }
});

Press ESC key <span id="state-msg"></span>

---

keyCode和keypress已被弃用。

似乎keydown和keyup可以使用。

---

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

使用jQuery的逃逸键的键码是哪个？

- jmj

---

取消绑定：$(document).unbind("keyup", keyUpFunc); - Plattsy

为了解除绑定，您还可以在事件上使用命名空间，例如 $(document).on('keyup.unique_name', ...) 和 $(document).unbind('keyup.unique_name')。 - Lachlan McDonald

建议使用e.which（而不是e.keyCode）来检查按下的键。jQuery规范化了keyCode和charCode（在旧版浏览器中使用）。 - DMTintner

你应该始终使用 ===。 - pmandell

@LachlanMcD - 注意（5年后！）unbind现在已经被jQuery 3.0弃用...你应该使用.off。 - freefaller

Answer 2

keydown事件对于Escape按键可以正常工作，并且有一个好处，就是允许您在所有浏览器中使用keyCode。此外，您需要将侦听器附加到document而不是body。

更新于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

- Tim Down

---

注意，你也可以将监听器添加到 <input> 元素上，这样它只会在该元素获得焦点时触发。 - Mike

你也可以检查 if (evt.key === 'Escape') { 而不是使用已弃用的 keyCode。 - Keysox

@Keysox：对于大多数现代浏览器来说，是的，尽管现在你仍需要备选方案。我会编辑我的回答。 - Tim Down

请注意，MDN关于keyCode的参考文档（包括弃用节点）。 - Steven

如果您想知道是否可以安全地使用.key，请参阅https://caniuse.com/#feat=keyboardevent-key - Jasper de Vries

似乎在Chrome中无法从任何元素获取键按下事件，但是当Escape使表单字段失去焦点（模糊）时。 您可以尝试运行上面的代码片段，然后将焦点放在“您的答案”文本框上，然后按“Escape”键。 如果有人有可靠的解决方法，我会非常感激。 - Aurélien Martin

Answer 3

使用JavaScript，您可以检查工作情况。jsfiddle

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert('Esc key pressed.');
    }
};

使用jQuery，您可以检查以下工作 jsfiddle

jQuery(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       alert('Esc key pressed.');
    }
});

- Subodh Ghulaxe

---

Intellij 提示你的原生 JS 代码片段已过时。我应该在什么时候停止使用它？ - Dimitri Kopriwa

Answer 4

纯JS

您可以为文档的keyUp事件附加一个监听器。

另外，如果您想确保没有其他键与Esc键一起按下，您可以使用ctrlKey、altKey和shifkey的值。

 document.addEventListener('keydown', (event) => {
        
        if (event.key === 'Escape') {
         //if esc key was not pressed in combination with ctrl or alt or shift
            const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
            if (isNotCombinedKey) {
                console.log('Escape key was pressed with out any group keys')
              
            }
        }
    });

- Irshad

Answer 5

检查 keyCode 和 which，并且是 keyup 或者 keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

- jAndy

---

我看到这个不起作用，http://jsfiddle.net/GWJVt/ 只是为了转义...感觉很奇怪？ - Reigel Gallarde

$(document.body).keypress() 没有触发。 - Mithun Sreedharan

@Reigel：确实，似乎与keypress不正常工作。无论如何，我无法弄清楚那个“尴尬”的部分。 - jAndy

当按下字符键时（与还触发非字符键的KeyDown和KeyUp不同），KeyPress事件被触发。请注意，KeyPress事件只在按键处于按下状态时才会触发。 - Marta

Answer 6

纯JS（无JQuery）

document.addEventListener('keydown', function(e) {
    if(e.keyCode == 27){
      //add your code here
    }
});

- Dead Pool

---

嗨，感谢您回答这个问题。根据网站指南，请添加一些解释性文本以解释如何/为什么这样做。谢谢！ - Nathaniel Flick

在我进行研究并检查此处 https://onecompiler.com/html/3xy2mfps5 后，最好使用 key down，因为它适用于所有类型的按键，并使用 keyCode 或 code 进行 UI 更改（例如：当用户单击 escape 键时关闭模态框）。 - Himanshu Joshi

"keyCode" 已被弃用。 - Shaya Ulman

Answer 7

以下是代码，不仅禁用ESC键，还检查按下它的条件，并根据情况执行或不执行动作。

在这个例子中，

e.preventDefault();

将禁用ESC键按下操作。

您可以使用以下任何内容隐藏一个div：

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

同时还考虑了 ESC 键的按下：

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

如果您想将此应用于所有内容，则可以删除此条件部分。或者，您可以在此处针对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);

- Tarik

Answer 8

最好的方法是为此编写一个函数。

函数：

$.fn.escape = function (callback) {
    return this.each(function () {
        $(document).on("keydown", this, function (e) {
            var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
            if (keycode === 27) {
                callback.call(this, e);
            };
        });
    });
};

例子:

$("#my-div").escape(function () {
    alert('Escape!');
})

- Ivijan Stefan Stipić

---

实际上，在 Mac 上的 Chrome 浏览器中，似乎 keypress 事件不会在按下 Escape 键时触发。 - samson

感谢您的反馈，我已经进行了更新并改变了规则。 keydown 修复了这个问题。 - Ivijan Stefan Stipić

我更新了你的解决方案，使其能够支持“仅一次”使用。这里有一个例子：https://jsfiddle.net/oxok5x2p/。 - d.h.

只执行一次的酷炫解决方案 - Ivijan Stefan Stipić

Answer 9

我认为最简单的方法是使用原生JavaScript：

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

更新：将key => keyCode更改

- Duan Walker

---

在我的Chrome浏览器（版本55.0.2883.95（64位））中，我获得了Escape作为event.key而不是27。 - MosheZada

应该使用 event.keyCode 来表示 27。 - Jens Törnell

Answer 10

在 Firefox 78 中使用此方法（"keypress" 对于 Escape 键不起作用）：

function keyPress (e)(){
  if (e.key == "Escape"){
     //do something here      
  }
document.addEventListener("keyup", keyPress);

- Petr L.