JavaScript Keypresses keyup keydown keypress

As Always I try to make my blog cater for peeps that are just looking for concise answers, so if you scroll down there is a TL DR section below. If you are curious of my thoughts then keep reading.

My knowledge of keypresses consisted of the brief summary of “you press a key and you can make something happen”. Turns out there is a bit more to it.

Keypresses have three different trigger points. I’m going to put my naive understanding of them first, then what MDN says cause that is the best source of truth out there in my opinion. I also used StackOverflow.

First you have keydown

My understanding of a Keydown is the action of when the button is pressed, so as the key is pressed down you can set an action or trigger something from that point.

Unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.

from MDN

To sum keydown: Keydown will trigger for all keys pressed(odd ones being ctrl, shift. delete..etc). If you press any key thats a keydown.

Second you have keyup

My understanding of a key up is the “release” action of the keydown action. So you can set an action upon lifting your key from a pressed state.

The keydown and keyup events 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.

from MDN

To sum up keyup:. It trigger upon the release of a pressed key. Don’t worry MDN can be intimidating at times. It took me a while, but they are saying a keyup will trigger with a value of what key was pressed. Also, I think MDN has already moved on tooo..

Thirdly the keypress

My understanding: Keypress is the full action of just typing a key. so hit a key and let go and you have yourself a keypress buddy.

The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don’t produce a character value are modifier keys such as Alt
, Shift
, Ctrl
, or Meta

From MDN

Ok, so my understanding of a keypress was a bit off. It appears to be including all chars that set a value and not other keys like shift, control, alt…etc that don’t produce a character. According to MDN it appears that the keypress is deprecated so you would just need to be aware of that when using keypress.

I never in my life thought that someone could complicate a key press, but here we are 2020 virus is out. Try to stay inside guys ok.

TL DR

The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user releases a key.
The onKeyPress event is triggered when the user presses & releases a key (onKeyDown followed by onKeyUp).

from stackoverflow

In my defence I’m not as technical as MDN, my theory was around more towards what the stackoverflow post said.

I’ll leave you with that guys I really hope that this helps you out and helps you know that there is a bit more to a keypress than meets the eye.

On a side note. I got some positive comments on my previous post. Thanks so much for the support I’ll continue posting my findings and sharing the knowledge to help myself and others. I was so chuffed in fact i made a live sample of some javaScript and keypresses right here enjoy.