使用 jQuery 的转义键的哪个键码

Posted 2023-02-25

【中文标题】使用 jQuery 的转义键的哪个键码

【英文标题】：Which keycode for escape key with jQuery

【发布时间】：2010-11-12 16:47:29

【问题描述】：

我有两个功能。按下回车键时，功能运行正常，但按下转义键时却不能正常运行。转义键的正确数字是多少？

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

【问题讨论】：

Keypress 将返回一个连接到键的字符（在正确的大写等中），Keyup 将返回按下的硬件按钮的数量。对于 ESC，您需要硬件代码 27（而不是 ascii 字符 27）

How to detect escape key press with javascript or jQuery?的可能重复

有一个非常简单的技巧可以找出您想要的任何 keyCode。只需打开一个新选项卡，将document.addEventListener("keydown", e => console.log(e.keyCode)) 输入浏览器控制台，单击窗口并按您要查找的键。

【参考方案1】：

试试keyup event：

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

【讨论】：

这与 keyup 与 keypress 无关。要捕获 ESCAPE，您需要查看 e.keyCode 而不是 e.which（本示例恰好这样做）。

“这与 keyup 与 keypress 无关” - 这是不正确的，dkamins。 keypress 在浏览器之间的处理似乎不一致（在 IE、Chrome 和 Firefox 中尝试api.jquery.com/keypress 的演示——有时它不会注册，并且“which”和“keyCode”都不同）而 keyup 是一致的. e.which 是 jquery 规范化的值，所以 'which' 或 'keyCode' 都应该在 keyup 中工作。

@Jordan Brough - 我想请您发表您的评论作为答案，以便人们阅读并理解您评论的实际含义！因为您的评论与解释的答案一样重要

keydown将模仿本机行为 - 至少在 Windows 上，在对话框中按 ESC 或 Return 将在释放键之前触发操作。

@gibberish 我在这里添加了我的评论作为答案：***.com/a/28502629/58876

【参考方案2】：

$(document).on('keydown', function(event) 
   if (event.key == "Escape") 
       alert('Esc key pressed.');
   
);

【讨论】：

最好在答案中包含解释而不是代码。

【参考方案3】：

只是发布一个更新的答案而不是e.keyCode is considered DEPRECATED on 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);

【讨论】：

不过好像只有Firefox和Chrome支持。

这里是a long list of key values。

不幸的是，至少某些版本的 Internet Explorer 通过代码 Esc 而不是标准的 Escape。

【参考方案4】：

一个强大的 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;
    
);

hotkeys 理解以下修饰符：⇧,shiftoption⌥alt ctrl控制命令和⌘。

以下特殊键可用于快捷键：backspacetab,clear,enter,return,esc,escape,空格,up,down,left,right,home,end,pageup, pagedown、del、delete和f1到f19。

【参考方案5】：

（答案摘自我的previous comment）

您需要使用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 与e.keyCode 的讨论：请注意e.which 是jquery-normalized 值，是推荐使用的值：

event.which 属性规范了 event.keyCode 和 event.charCode。键盘按键输入建议观看 event.which。

（来自http://api.jquery.com/event.which/）

【讨论】：

我还想在这里补充一点，在逃逸时不会触发keypress 的浏览器做得对。 keypress 仅在键产生字符时触发，而 keyup 始终触发。 developer.mozilla.org/en-US/docs/Web/Events/keypress

【参考方案6】：

你最好的选择是

$(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 更可取，因为如果用户按住它，keydown 可能会发生多次。 请勿使用keypress，除非您想捕获实际字符。

有趣的是，Bootstrap 在其下拉组件中使用了 keydown 和 keyCode（从 3.0.2 开始）！我认为那里可能是个糟糕的选择。

来自 JQuery 文档的相关 sn-p

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

其他感兴趣的项目：JavaScript Keypress Library

【参考方案7】：

试试jEscape 插件 (download from google drive)

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

或者获取跨浏览器的keycode

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;

【参考方案8】：

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

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 对象，为您公开这些类型的常量。 This SO question 展示了一种在其他浏览器中定义该对象的好方法。

【讨论】：

什么，27不只是作为逃生键跳出来吗？！？老实说，这确实需要更多的人来完成。我称它们为“幻数”和“幻弦”。 72 是什么意思？为什么你的代码库中有一个非常具体且易变的字符串被复制粘贴了 300 次？等

@IvanDurst 您可能每个方法只使用它们一次，但我在我的项目中多次使用它们。您是否真的建议您 (1) 查找值并 (2) 每次要使用键码时对其进行注释？我不了解你，但我既不想记住它们，也不相信其他程序员会一致地评论它们。这是为了让编码更容易、更一致，而不仅仅是更具可读性。

知道他们意思的人不必查找意思来评论他们，输入评论就像输入长名字一样快。

并不是说我以任何方式反对命名常量，但我认为值得注意的是，ENTER 可以被视为例外情况。如果有人选择使用 13 个“原始”和无注释，我不会觉得它是一种糟糕的形式，因为所有 Web 开发人员都会将其解读为“输入”而不引起混淆是一个合理的期望。

过去我们用十六进制编码字符常量时发生了什么？大家都知道ESC是0x1B，Enter是0x0D吧？

【参考方案9】：

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

$.ui.keyCode.ESCAPE

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

【参考方案10】：

27 是转义键的代码。 :)

【讨论】：

当输入时我有两个功能，按下这些功能可以正常运行，但不能使用转义键.. $(document).keypress(function(e) if (e.which == 13) $ ('.save').click(); if (e.which == 27) $('.cancel').click(); );

$(document).keypress(function(e) y=e.keyCode?e.keyCode:e.which;);当我警告（y）时，它会在 IE 和 FF 中警告 27。您确定您的代码没有其他问题吗？

【参考方案11】：

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

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

此处出现差异是因为esc 是control character（字面意思是“非打印字符”），因此不写任何文本，因此甚至不会触发keypress。enter 很奇怪，因为即使您将它用作控制字符（即控制 UI），它仍然会插入一个换行符，这将触发 keypress。

来源：quirksmode

【讨论】：

感谢阅读规范！这肯定是公认的答案:)

【参考方案12】：

要查找任何键的键码，请使用以下简单函数：

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

【参考方案13】：

我一直使用 keyup 和 e.which 来捕捉转义键。

【参考方案14】：

我正在尝试做同样的事情，但它让我大吃一惊。在 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);

【参考方案15】：

您的代码运行良好。很可能是没有聚焦的窗口。我使用类似的功能来关闭 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';
    

);

【参考方案16】：

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

【讨论】：

我想说.....我讨厌这个网站在搜索结果的顶部，因为它太丑了，但它确实传达了必要的信息。

请注意，根据事件和浏览器，键码并不总是与 ascii 表匹配。

downvote：不回答问题，甚至不解决问题，十六进制与问题无关，OP已经证明了 esc == 27 的知识。