onKeyPress Vs. onKeyUp and onKeyDown

onKeyPress Vs. onKeyUp and onKeyDown

What is the difference between these three events? Upon googling I found that

The KeyDown event is triggered when
the user presses a Key.
The KeyUp event is triggered when the
user releases a Key.
The KeyPress event is triggered when
the user presses & releases a Key.
(onKeyDown followed by onKeyUp)

I understand the first two, but isn’t KeyPress the same as KeyUp? (or is it possible to release a key(KeyUp) without pressing(KeyDown) it?)
This is a bit confusing, can someone clear this up for me?

Solutions/Answers:

Solution 1:

Check here for the archived link originally used in this answer.

From that link:

In theory, the keydown and keyup
events represent keys being pressed or
released, while the keypress event
represents a character being typed.
The implementation of the theory is
not same in all browsers.

Solution 2:

KeyPress, KeyUp and KeyDown are analogous to, respectively: Click, MouseUp, and MouseDown.

  1. Down happens first
  2. Press happens second (when text is entered)
  3. Up happens last (when text input is complete).
Related:  Confirmation dialog on ng-click - AngularJS

The exception is webkit, which has an extra event in there:

keydown
keypress
textInput     
keyup

Below is a snippet you can use to see for yourself when the events get fired:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Solution 3:

onkeydown is fired when the key is down (like in shortcuts; for example, in Ctrl+A, Ctrl is held ‘down’.

onkeyup is fired when the key is released (including modifier/etc keys)

onkeypress is fired as a combination of onkeydown and onkeyup, or depending on keyboard repeat (when onkeyup isn’t fired). (this repeat behaviour is something that I haven’t tested. If you do test, add a comment!)

textInput (webkit only) is fired when some text is entered (for example, Shift+A would enter uppercase ‘A’, but Ctrl+A would select text and not enter any text input. In that case, all other events are fired)

Solution 4:

Most of the answers here are focused more on theory than practical matters and there’s some big differences between keyup and keypress as it pertains to input field values, at least in Firefox (tested in 43).

Related:  Uncaught TypeError: Cannot read property 'value' of undefined

If the user types 1 into an empty input element:

  1. The value of the input element will be an empty string (old value) inside the keypress handler

  2. The value of the input element will be 1 (new value) inside the keyup handler.

This is of critical importance if you are doing something that relies on knowing the new value after the input rather than the current value such as inline validation or auto tabbing.

Scenario:

  1. The user types 12345 into an input element.
  2. The user selects the text 12345.
  3. The user types the letter A.

When the keypress event fires after entering the letter A, the text box now contains only the letter A.

But:

  1. Field.val() is 12345.
  2. $Field.val().length is 5
  3. The user selection is an empty string (preventing you from determining what was deleted by overwriting the selection).

So it seems that the browser (Firefox 43) erases the user’s selection, then fires the keypress event, then updates the fields contents, then fires keyup.

Solution 5:

It seems that onkeypress and onkeydown do the same (whithin the small difference of shortcut keys already mentioned above).

Related:  jQuery how to bind onclick event to dynamically added HTML element [duplicate]

You can try this:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

And you will see that the events onkeypress and onkeydown are both triggered while the key is pressed and not when the key is pressed.

The difference is that the event is triggered not once but many times (as long as you hold the key pressed). Be aware of that and handle them accordingly.

Solution 6:

The onkeypress event works for all the keys except ALT, CTRL, SHIFT, ESC in all browsers where as onkeydown event works for all keys. Means onkeydown event captures all the keys.