jQuery按键，按键按下，按键黑魔法(在Mac上)背后的理论是什么? [英] What's the theory behind jQuery keypress, keydown, keyup black magic (on Macs)?

问题描述

我对 keypress ， keydown 和 keyup 的各种行为感到困惑.似乎我错过了一份重要的文档，该文档解释了这三者的微妙之处和细微差别.有人可以帮我弄清楚我需要阅读哪个文档才能更有效地使用这些事件吗?如果需要详细信息，请参见下文.

I am confused about the various behaviors of keypress, keydown, and keyup. It seems that I have missed an important piece of documentation, one that explains the subtleties and nuances of this trio. Could someone help me to figure out which document I need to read in order to more effectively use these events? In case you want details, see below.

@ o.v .:您要求我显示一些代码，但这并不是我要解决的代码中的特定问题.我正在设法弄清这些事件处理程序的行为，并请了解它们的人为我指出一本很好的文档.

@o.v.: you asked me to show some code, but it's not really a specific problem in the code that I'm trying to solve. I'm trying to get a handle on the behaviors of these event handlers and asking someone who understands them to point me to a good piece of documentation.

我使用jQuery构建输入表单并将其插入到我的文档中.大多数情况下，它都可以正常工作.我希望表单像我看到的大多数其他输入表单一样对键盘做出响应: esc 键应该像单击取消"按钮一样关闭表单，并且因为表单具有<textarea>在其上， cmd + enter 应该与单击 OK 按钮相同.使用 keypress 事件似乎很简单.问题是Chrome不会为 esc 键或 cmd + enter 调用我的 keypress 处理程序.对于 ctrl + enter 和 option + enter ，对于字母数字，但对于 cmd，则不会触发. kbd> + 输入.

I use jQuery to build an input form and insert it into my document. It works just fine, mostly. I want the form to respond to the keyboard like most other input forms I see out there: the esc key should dismiss the form the same as clicking the cancel button, and because the form has a <textarea> on it, cmd + enter should be the same as clicking the OK button. It seems simple enough to use the keypress event. The problem is that Chrome doesn't call my keypress handler for the esc key or cmd + enter. It fires for ctrl + enter and option + enter and for alphanumerics, but not cmd + enter.

因此，我将改用 keyup .我得到 keyup 表示 esc ，并且 keyup 表示 cmd ，并且 keyup 表示 enter ，太好了.但是当我按住 cmd 时，我没有得到 keyup 作为 enter 键.

So I'll use keyup instead. I get keyup for esc, and keyup for cmd, and keyup for enter, great. But I don't get keyup for the enter key while I'm holding down cmd.

第三次是魅力，您可能会认为 keydown 似乎有效，但是使用 keydown 时，您会得到重复的密钥.我知道，您要做的只是在第一次调用时取消绑定处理程序，但是似乎很奇怪，三种不同的事件类型的行为如此不同.为什么是这样?有明显的文件我显然还没有读过吗?

Third time's the charm, you might think keydown seems to work, but with keydown, you get repeat keys. I know, all you have to do is unbind the handler the first time you're called, but it just seems weird that the three different event types would behave so differently. Why is this? Is there an obvious document out there that I obviously haven't read?

推荐答案

按键:

Keypress:

当浏览器注册时，keypress事件发送到一个元素 键盘输入.这与keydown事件类似，除了 重复输入.如果用户按住某个键，则按下 事件被触发一次，但触发了单独的按键事件 每个插入的字符.此外，修改键(例如 Shift)会触发按键事件，但不是按键事件.

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character. In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.

Keydown :

Keydown:

当用户第一次按a时，会将keydown事件发送到元素 键盘上的键.它可以附加到任何元素，但事件 仅发送到具有焦点的元素.可聚焦的元素可以 在浏览器之间变化，但是表单元素始终可以得到关注，因此 此事件类型的合理候选者.

The keydown event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

键盘:

Keyup:

当用户释放键时，会将keyup事件发送到元素 键盘.它可以附加到任何元素，但事件仅 发送到具有焦点的元素.重点突出的元素可能会有所不同 在浏览器之间，但是表单元素总是可以得到焦点，因此 此事件类型的合理候选者.

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

此外，这是一条很方便的信息，通常会被掩盖:

Also, this is a handy piece of information that is usually glossed over:

如果需要捕获任何按键(例如，执行 页面上的全局快捷键)，附加此行为非常有用 到文档对象.由于事件冒泡，所有按键 将使DOM到达文档对象，除非 明确停止.

If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the document object. Because of event bubbling, all key presses will make their way up the DOM to the document object unless explicitly stopped.

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

To determine which character was entered, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the character code.

请注意，keydown和keyup提供了一个代码，用于指示哪个键是 按下，而按键指示输入了哪个字符. 例如，按下键和按下键将小写的"a"报告为65， 但按下键盘时为97.全部报告为大写"A"为65 事件.由于这种区别，在捕获特殊按键时 例如箭头键，.keydown()或.keyup()是更好的选择.

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

有关MAC上cmd键的更多信息:命令键的jQuery键代码

More information regarding the cmd key on MACs: jQuery key code for command key

这篇关于jQuery按键，按键按下，按键黑魔法(在Mac上)背后的理论是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！