Javascript 如何使用纯JS或jQuery检测escape按键？

可能重复：

如何检测IE、Firefox和Chrome中的escape按键？ 下面的代码适用于IE和alerts

27

，但在Firefox中它会发出alerts

0

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

---

检查

keyCode

&&

哪个

&

keyup

|

keydown

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

---

注意：

keyCode

是，请改用

key

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

代码片段：

$.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!');
})

var msg=document.getElementById（'state-msg'）；
document.body.addEventListener（'keypress'，函数（e）{
如果（e.key==“Escape”）{
msg.textContent+=“按Escape:”
}
});
按ESC键
退出时，
keydown
事件可以正常工作，并允许您在所有浏览器中使用
keyCode
。此外，您需要将侦听器附加到
文档
而不是正文

2016年5月更新

keyCode
现在正处于被弃用的过程中，大多数现代浏览器现在都提供了该属性，尽管您现在仍然需要一个适当的浏览器支持回退（在编写当前版本的Chrome和Safari时不支持它）

2018年9月更新
现在所有现代浏览器都支持


document.onkeydown=函数（evt）{
evt=evt | | window.event；
var isEscape=false；
如果（evt中的“键”）{
isEscape=（evt.key==“Escape”| | evt.key==“Esc”）；
}否则{
isEscape=（evt.keyCode==27）；
}
如果（isEscape）{
警惕（“逃跑”）；
}
};
单击我，然后按退出键
使用您可以执行检查工作

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

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

使用您可以执行检查工作

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

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

最好的方法是为这项工作提供功能

功能：

$.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!');
})

示例：

$.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!');
})

我认为最简单的方法是香草javascript：

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

更新：Changed key=>keyCode
下面的代码不仅可以禁用ESC键，还可以检查按下ESC键的情况，并根据情况决定是否执行操作

在这个例子中

e.preventDefault();

将禁用ESC按键操作

您可以使用以下命令隐藏div：

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

当按下ESC键时，也应考虑：

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

如果要将此条件应用于所有人，可以删除此条件部分。或者，您可以将此处的输入作为目标，以便仅在光标位于输入框中时应用此操作

window.addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
        e.preventDefault();
        return false;
    }
}, true);

在Firefox 78上，使用以下命令（“按键”不适用于Escape键）：

纯JS
您可以将侦听器附加到文档的
keyUp
事件

此外，如果要确保任何其他键未与
Esc
键一起按下，则可以使用
ctrlKey
、
altKey
和
ShiftKey
的值

 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')
              
            }
        }
    });

纯JS（无JQuery）

document.addEventListener（'keydown'，函数（e）{
如果（e.keyCode==27）{
//在这里添加您的代码
}
});
先进行一些浏览器检测吗？我发现quirksmode.org总是可以可靠地找到在哪个浏览器中工作的内容：。在那里，你可以发现只有
keyup
或
keydown
与
keyCode
结合使用才能在所有浏览器中工作。我认为这个问题的标题应该是“如何使用jquery检测escape按键？”或者答案应该是本机javascript…
$（文档）。在（“keyup”，函数（e）{var code=e.keyCode | | e.which；alert（'key pressed:'+code）；}）
来自2014年的问候语我看到这个可能的副本不起作用，只是为了逃避…看起来很尴尬？$（document.body）.keypress（）不是firing@Reigel：事实上，似乎无法正确使用按键。无论如何，我无法理解“尴尬”部分。按键是为字符键而提升的（与也为非字符键而提升的KeyDown和KeyUp不同）按键时。注意，您也可以将侦听器添加到
元素中，因此只有当该元素具有焦点时才会触发它。@Ranmocy：它是什么类型的元素（ID为“test”的元素）？只有能够接收焦点的元素（表单输入、contenteditable元素、设置了tabindex的元素）触发密钥事件。你也可以检查
if（evt.key==“Escape”）{
而不是使用不推荐使用的
keyCode
@tobymackenzie:的确如此。这不是很奇妙吗？欢迎来到基于标准的web开发的新世界。如果你想知道你是否可以安全地使用
.key
，请参阅解除绑定：$（文档）。解除绑定（“keyup”，keyUpFunc）；要解除绑定，还可以在事件上使用命名空间，
$（document）。on（'keyup.unique_name'，…）
和
$（document）。解除绑定（'keyup.unique_name'）
建议使用e.which（而不是e.keycode）来检查按下了哪个键。jQuery规范化了keycode和charcode（在较旧的浏览器中使用）您应该始终使用
==
@LachlanMcD-注意（5年后！）从jQuery 3.0开始，它现在就被弃用了……实际上，你应该使用，
keypress
似乎不会在逃生键上开火。至少，在Mac上的Chrome中不会。谢谢你的反馈，我制定了一个更新和更改规则。
keydown
解决了这个问题。我更新了你的解决方案，使它能够支持“只使用一次”。下面是一个例子示例：。仅适用于onceOn my chrome（版本55.0.2883.95（64位））的酷解决方案我得到
Escape
作为
event.key
而不是27它应该是
event.keyCode
为27。Intellij说你的vanilla js代码片段不受欢迎。我应该什么时候停止使用它？嗨，谢谢你回答这个问题，根据网站指南，请添加一些解释文本来解释它是如何工作的/为什么工作的。谢谢！