Question

使用jQuery的逃生密钥的键代码

2009-07-21

519068

javascript jquery

我有两个函数。按下 Enter 键时，函数运行正常，但按下 Esc 键时则不运行。Esc 键的正确数字是多少？

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

Answer 1

尝试使用 keyup 事件 :

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

Answer 2

不要在函数中对键码值进行硬编码，而要考虑使用命名常量来更好地传达您的意思：

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

Answer 3

（答案摘自我的之前的评论）

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

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

keypress 似乎无法在不同的浏览器之间得到一致处理（请在 IE、Chrome 和 Firefox 中试用 http://api.jquery.com/keypress 上的演示。有时 keypress 不会注册，并且 'which' 和 'keyCode' 的值会有所不同），而 keyup 是一致的。

由于对 e.which 与 e.keyCode 进行了一些讨论：请注意， e.which 是 jquery 规范化的值，是建议使用的值：

The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.

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