On the other hand, de has the benefit of staying always the same, bound to the physical key location. To reliably track layout-dependent characters, event.key may be a better way. You can find the list in the specification. keyA, keyQ, keyZ (as we’ve seen), and doesn’t happen with special keys such as Shift. Luckily, that happens only with several codes, e.g. Same letters in different layouts may map to different physical keys, leading to different codes. So, de may match a wrong character for unexpected layout. The specification explicitly mentions such behavior. If we check de = 'KeyZ' in our code, then for people with German layout such test will pass when they press Y. Literally, de will equal KeyZ for people with German layout when they press Y. So it makes sense to check de, it’s always the same.įor the same key, US layout has “Z”, while German layout has “Y” (letters are swapped). If the visitor has several languages in OS and switches between them, the same key gives different characters. On one hand, the value of event.key is a character, it changes depending on the language. There’s a dilemma here: in such a listener, should we check the value of event.key or de? We can set a listener on keydown and check which key is pressed. Most text editors hook the “Undo” action on it. Let’s say, we want to handle a hotkey: Ctrl +Z (or Cmd +Z for Mac). The de tells us exactly which one was pressed, and event.key is responsible for the “meaning” of the key: what it is (a “Shift”). For instance, most keyboards have two Shift keys: on the left and on the right side. Please note that de specifies exactly which key is pressed. For those keys, event.key is approximately the same as de: Key What if a key does not give any character? For instance, Shift or F1 or others. The check like de="keyZ" won’t work: the first letter of "Key" must be uppercase. Please evade mistypes: it’s KeyZ, not keyZ.
Seems obvious, but people still make mistakes. That will become the value of event.key, while de is always the same: "KeyZ". If a user works with different languages, then switching to another language would make a totally different character instead of "Z".
The event.key is exactly the character, and it will be different. That gives us two different characters: lowercase z and uppercase Z.
REACT KEYUP CODE
The key property of the event object allows to get the character, while the code property of the event object allows to get the “physical key code”.įor instance, the same key Z can be pressed with or without Shift. The keydown events happens when a key is pressed down, and then keyup – when it’s released. To register an event handler for the capture phase, append Capture to the event name for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.Focus on the input field and press a key. The event handlers below are triggered by an event in the bubbling phase. React normalizes events so that they have consistent properties across different browsers. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate. Boolean isDefaultPrevented ( ) void stopPropagation ( )īoolean isPropagationStopped ( ) void persist ( )Īs of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.Īs of v0.14, returning false from an event handler will no longer stop event propagation.
0 kommentar(er)
