哪个键代码的转义键与jQuery

我有两个函数。当按下回车键时，函数正常运行，但当按下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)
});
505303 次浏览
小开

27是escape键的代码。：）

小开
最佳答案

尝试使用keyup事件:

$(document).on('keyup', function(e) {
if (e.key == "Enter") $('.save').click();
if (e.key == "Escape") $('.cancel').click();
});
小开

要获得所有字符的十六进制代码:http://asciitable.com/

小开

与其硬编码函数中的keycode值，不如考虑使用命名常量来更好地传达你的意思:

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问题也展示了在其他浏览器中定义该对象的好方法。

小开

您的代码工作得很好。很可能是窗户没有聚焦。我使用类似的功能关闭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中，如果你在按下escape键时尝试做一些事情，它会继续处理escape键，然后取消你试图做的任何事情。Alert工作正常。但在我的情况下，我想回到历史，这是行不通的。最后我发现我必须强制事件的传播停止，如下所示…

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);
}
小开

尝试jEscape插件(从谷歌驱动器下载)

$(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;
}
小开

我一直用keyup和e.来捕捉escape键。

小开

要找到任何键的键码，使用这个简单的函数:

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

解释其他答案没有解释的地方;问题是你使用了keypress。

也许事件只是命名错误，但是keypress被定义为当when an actualcharacteris being inserted时触发。即文本。
而你想要的是keydown/keyup，它会在the user depresses akey之前或之后触发。也就是键盘上的那些东西

这里出现的差异是因为esc是控制字符(字面上是“非打印字符”)，因此不写入任何文本，因此甚至不会触发keypress enter很奇怪，因为即使你使用它作为一个控制字符(即控制UI)，它仍然插入一个新行字符，这将触发keypress.

来源:# EYZ0

小开

你最好的选择是

$(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();
});

总结

  • which比keyCode更可取，因为它是标准化的
  • keyup比keydown更可取，因为如果用户一直按下键，按下键可能会出现多次。
  • 不要使用keypress，除非您想捕获实际的字符。

有趣的是，Bootstrap在下拉组件中使用keydown和keyCode(从3.0.2开始)!我觉得这是个糟糕的选择。

来自JQuery文档的相关片段

而浏览器使用不同的 属性来存储这些信息，jQuery规范化了 属性，以便您可以可靠地使用它来检索密钥代码。这 代码对应键盘上的一个键，包括特殊的代码 键，如箭头。为了捕获实际的文本输入，.keypress()可能 是更好的选择。

其他感兴趣的项目:JavaScript按键库

小开

我知道这个问题是在问jquery，但是对于那些使用jqueryui的人来说，许多键码都有常量:

$.ui.keyCode.ESCAPE

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

小开

(答案从我的先前的评论中提取)

您需要使用keyup而不是keypress。例如:

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

keypress似乎在浏览器之间处理不一致(尝试在IE vs Chrome vs Firefox中的http://api.jquery.com/keypress演示。有时keypress不注册，“which”和“keyCode”的值都不同)，而keyup是一致的。

由于有一些关于e.which vs e.keyCode的讨论:请注意，e.which是jquery规范化的值，也是推荐使用的值:

该事件。哪个属性规范化事件。keyCode和event.charCode。建议观看赛事。其中用于键盘按键输入。

(从# EYZ0)

小开

一个健壮的Javascript库，用于捕获键盘输入和输入的组合键。它没有依赖关系。

< a href = " http://jaywcjlove.github。io /热键noreferrer“rel = > http://jaywcjlove.github.io/hotkeys/ < / >

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

热键理解以下修饰符:⇧，转变选项⌥altctrl控制命令和⌘。

以下特殊键可以用于快捷键:退格选项卡，清晰的，输入，返回，esc，逃避，空间，向上，下来，选项卡0，选项卡1，选项卡2，选项卡3，选项卡4，选项卡5，选项卡6，选项卡7和选项卡8到选项卡9。

小开

只是发布了一个比e.keyCode在MDN上被认为已弃用更新的答案。

相反，您应该选择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);
小开 
$(document).on('keydown', function(event) {
if (event.key == "Escape") {
alert('Esc key pressed.');
}
});

提交答案