JavaScript/jQuery：用于键盘导航的按键（event.which 不起作用）答案

【问题标题】：JavaScript/jQuery: Keypress for keyboard navigation (event.which doesn't work)JavaScript/jQuery：用于键盘导航的按键（event.which 不起作用）
【发布时间】：2011-04-03 21:08:36
【问题描述】：

在处理 key[Up|Down|Press] 事件时，我应该使用 .which 还是 .keyCode？我可以提供一些处理three keyboard events in jQuery 的示例代码吗？没有jQuery你能做到吗？我希望它在每个浏览器中都能可靠地工作。

更新

奇怪的是，jQuery 的 event.which 规范化不适用于我的 handleKeyPress(event) 处理程序：

// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
    event.which = event.charCode || event.keyCode;
}

我在 handleKeyPress 中的规范化之前和之后得到这个（它没有将 event.which 设置为 event.keyCode 中的值）：

event.which = 0
event.charCode = 0
event.keyCode = 40

但是，如果我改用 handleKeyDown，则代码可以工作。我认为这与 keypress 与 keydown 有关；该代码适用于我的 handleKeyDown(event) 处理程序。

不幸的是，我需要使用 keypress（不是 keydown），因为我想使用箭头键进行导航：如果用户按住箭头键，keydown 事件被触发一次，但每个插入的字符都会触发单独的keypress 事件。

【问题讨论】：

标签： javascript jquery keypress keydown onkeyup

【解决方案1】：

jQuery 规范化 event.which（参见：api.jquery.com/event.which/），这就是你所需要的。

【讨论】：

【解决方案2】：

请参考与您的问题相关的this thread。

一般来说，我经常支持 .which，因为它可以让您同时跟踪 charCodes 和 keyCodes。 event.which 被内置到 jQuery 中，以便规范这些不同的方法。

您可以找到有关 keyCodes here 的更多信息。

【讨论】：

如果这对你有帮助，请考虑接受这个答案或投票给它。

【解决方案3】：

有关 keypress() 的文档，请参阅 jQuery API，您可以对其进行绑定。 http://api.jquery.com/keypress/

另外，这里有一个很好的使用 jquery 进行按键导航的演练： http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/

编辑：API 中重要/更相关的行：

如果需要捕获任何地方的按键（例如，在页面上实现全局快捷键），则将此行为附加到文档对象很有用。由于事件冒泡，除非明确停止，否则所有按键都会沿 DOM 向上到达文档对象。

要确定输入了哪个字符，我们可以检查传递给处理函数的事件对象。虽然浏览器使用不同的属性来存储这些信息，但 jQuery 标准化了 .which 属性，因此我们可以可靠地使用它来检索字符代码。

请注意，keydown 和 keyup 提供了一个代码，指示按下了哪个键，而 keypress 指示输入了哪个字符。例如，小写字母“a”将被 keydown 和 keyup 报告为 65，但被 keypress 报告为 97。所有事件都将大写“A”报告为 65。由于这种区别，当捕捉箭头键等特殊击键时，.keydown() 或 .keyup() 是更好的选择。

【讨论】：

【解决方案4】：

根据this page：

event.which 在keydown 和keyup 的IE

对于返回字符的键，event.keyCode 在 Gecko（Seamonkey、Firefox）中的 keypress 中为 0。

event.charCode 仅受 Internet Explorer (Mac) 的 keydown 和 keyup 支持。

Try it on JSFiddle

【讨论】：