jointzuloo.blogg.se - React keyup

If you’re still not convinced here’s another reason to avoid keypress: It’s not fired consistently across browsers. Why have two methods of capturing key events when one will do? Just use keydown. This can put you in a situation where you’re needlessly debugging keypress for not firing events or where you’re managing both keypress and keydown events. So modifier keys like Shift, Control, Alt/Meta, function keys, etc won’t fire keypress events. You can cancel and stop bubbling of keypress events just like you can keydown events, but keypressonly fires for a subset of keys – keys that produce character values – whereas keydown fires on all of the keys. inserting a character, moving focusing, submitting a form, etc). Keypress fires after keydown, but still before the browser processes the key (e.g. Reasons for avoiding keypress Lacks key coverage Speaking of keypress, let’s look at why we want to avoid keypress next. This is important because as you’ll see soon this isn’t always the case for its closely related event: keypress. Consistent across browsersĪnother reason for using keydown is that it fires consistently across browsers. If you don’t want the event to propagate out (aka bubble up thru the DOM) then you can stop that by using the event’s stopPropagation method. If you don’t want to allow the letter “f” to be inserted – no problem – just cancel it using the event’s preventDefault method. CancelableĪnother reason for keydown is that it fires before the browser processes the key so you have the opportunity to cancel it and/or stop it from bubbling up thru the DOM. You’ll never miss a keyboard event for a key that is pressed with keydown. For example, it will fire for a character producing key like “f”, a modifier key like “Shift”, function keys, etc. Keydown fires for any key so it’s going to give you the most coverage of keys being pressed.

In my experience, keydown is the only keyboard event worth using, keypress can be ignored entirely, and keyup is well suited for getting dusty on the shelf. Keydown is the only event you need to use

keyup – fires when any key is released, fires last, and the browser processes the key.Įach of these events are cancelable and bubble up the DOM, but they’re not all equally useful.

keypress – fires when a key that produces a character value is pressed down, fires after keydown, and before the browser processes the key.

keydown – fires when any key is pressed down, fires first, and always before the browser processes the key (e.g.

Here are the three keyboard events supported by all of the major browsers, in the order they are fired: Let’s take a look starting with understanding what keyboard events exist today. The others, who needs them? Not us! Okay, maybe keyup goes on the shelf just in case, but surely keypress can be tossed out. The first bit of practical advice I want to touch on is that keydown is likely the only keyboard event we need. May our future selves spent less time debugging and more time making wonderful experiences for our users. I hope to provide you (and future me) with solid footing and helpful information. There’s a lot of information out there on browser-based keyboard events, but I couldn’t find practical advice to my questions in a single, coherent post so I thought I’d write some posts on the subject, starting with this one. Wondering about keyboard events: What they are, when to use them, when to not use? Me too.