What is the theory of jQuery keypress, keydown, keyup black magic (on Mac)?

Question

I am confused about the different ways of pressing keys, pressing keys and pressing keys. It seems that I missed an important part of the documentation that explains the subtleties and nuances of this trio. Can someone help me figure out which document I need to read in order to make better use of these events? If you need details, see below.

@ov: you asked me to show some code, but this is not a special problem in the code that I am trying to solve. I am trying to figure out the behavior of these event handlers and ask someone who understands them to show me good documentation.

I use jQuery to create an input form and paste it into my document. It works great, basically. I want the form to respond to the keyboard, like most other input forms that I see there: the esc key should reject the form in the same way as pressing the cancel button, and because the form has <textarea> on it, cmd + enter should match by pressing the OK button. It seems simple enough to use the keypress event. The problem is that Chrome does not call my esc or cmd + enter key handler. It runs for ctrl + enter and option + enter and for alphanumeric characters, but not cmd + enter .

So, I will use keyup instead. I get keyup for esc and keyup for cmd and keyup for enter , great. But I do not get keyup for enter key while I hold cmd .

The third time, enchantment, you might think that the failure works, but with keydown you get the retry keys. I know all you have to do is untie the handler on the first call, but it seems strange that three different types of events will behave differently. Why is this? Is there an obvious document that I obviously have not read?

Answer 1

Keypress :

---

A keypress event is dispatched to an element when the browser registers keyboard input. This is similar to the keydown event , except in the case of key repetitions . If the user presses and holds a key, the event is triggered once , but individual keypress events are triggered for each inserted character . In addition, modifier keys (such as Shift), but do not cause keystrokes .

Keydown :

---

The keydown event is dispatched to the element when the user first presses a button on the keyboard . It can be attached to any element, but the event is dispatched only to the element in which it has focus . Focused elements can vary between browsers , but form elements can always get focus, so there are reasonable candidates for this type of event.

Keyup :

---

The keyup event is dispatched to an element when the user issues a key to the keyboard . It can be attached to any element, but the event is only dispatched to the element in which it has focus . Focusable elements can be between browsers, but form elements can always be reasonable candidates for this type of event.

In addition, this is a convenient piece of information that is usually shaded:

---

If keystrokes anywhere should be caught (for example, to implement global keyboard shortcuts on a page), it is useful to attach this behavior to the document object. Due to event bubbles, all keystrokes will go to the DOM to the document object, unless explicitly stopped.

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

Please note that keydown and keyup provide a code indicating which key is pressed, and a keystroke indicates which character was entered. . For example, the lowercase "a" will be displayed as 65 using keydown and keyup, but as 97 by pressing a key. In upper case, “A” is reported as 65 Events. Because of this difference, when catching special keystrokes such as arrow keys, .keydown () or .keyup () is the best choice.

Additional information about cmd button for MAC addresses: jQuery key code for command line

Answer 2

This article is a good resource explaining the differences between keyup , keydown and keypress .

Short answer: there is no easy way to deal with them, except for accounting for different browsers.

The way I personally process it in the boot plugin that I wrote is to create a custom method to check which event is supported. By the way, a very similar method appeared in the official version of Bootstrap a bit later: P

 //------------------------------------------------------------------ // // Check if an event is supported by the browser eg. 'keypress' // * This was included to handle the "exhaustive deprecation" of jQuery.browser in jQuery 1.8 // eventSupported: function(eventName) { var isSupported = (eventName in this.$element); if (!isSupported) { this.$element.setAttribute(eventName, 'return;'); isSupported = typeof this.$element[eventName] === 'function'; } return isSupported; } 

Later, I use it in my code to add event handlers:

 if (this.eventSupported('keydown')) { this.$element.on('keydown', $.proxy(this.keypress, this)); } 

Answer 3

You must remember that when checking the KeyboardEvent on the layout, the ⌘ key will not be selected as event.ctrlKey , but rather event.metaKey . Additional documentation is available on MDN .

Without seeing the code, my bet is that this is the reason why ⌘+Enter not matched.