Differences between Onkeyup, Onkeydown and Onkeypress?

Question

When exactly are they fired? And what are the usage contexts for each one?

I ask this because every time I needed to use it I always solved it with onkeyup. Although the doubt is in javascript it reflects in other languages too.

Answer 1

They perform different functions.

onkeydown is the first to fire and we can stop it. If you have an input you can prevent the keystroke from typing in the input if you have an Event Handler associated.

onkeypress is the second to fire. Note that this event is not fired on keys that do not generate characters, such as F1 ~ F12, tab, Esc, etc. Note that the keypress generates different results for large and small letter.

onkeyup is triggered when the key is dropped and its input added/recorded in the DOM. In the case of an input the new character is inserted and it is not possible to cancel, or an input will receive the character.

Examples:

keydown

An input that ignores vowels: http://jsfiddle.net/4t4ta4q5/

var input = document.querySelector('input');
var ignorar = ['a', 'e', 'i', 'o', 'u'];
input.addEventListener('keydown', function (e) {
    var char = e.keyCode || e.which;
    var letra = String.fromCharCode(char).toLowerCase();
    if (ignorar.indexOf(letra) != -1) e.preventDefault();
});

keypress

Distinguish large letter from small letter: http://jsfiddle.net/awrjLphp/

function log(e) {
    var char = e.code || e.keyCode || e.which;
    var res = [e.type, char, String.fromCharCode(char), '<br />'].join(' | ');
    document.getElementById('res').innerHTML += res;
};

input.addEventListener('keydown', log);
input.addEventListener('keypress', log);

This code will give

keydown | 77 | M | 
keypress | 109 | m | 

when we press the m small and

keydown | 77 | M | 
keypress | 77 | M | 

in the M great.

keyup

Add fields: http://jsfiddle.net/gz2ttyt1/

var inputs = $$('body > input').addEvent('keyup', function (e) {
    var numerico = this.value.replace(/[^0-9\.]/g, '');
    if (!numerico) this.value = this.value.slice(0, -1);
    var soma = inputs.map(function (input) {
        return parseFloat(input.value) || 0;
    }).reduce(function (a, b) {
        return a + b;
    }, 0);
    $$('body div > input').set('value', soma);
});

This is Mootools code, but in the background runs a script each keyup and sum the input values all in a field with the total.

Answer 2

Keypress, Keydown and Keyup are events triggered by the keyboard.

The Keydown happens first (when the key is lowering). The Keypress happens second (when the text is typed). The Keyup happens after the typed key (when the key is up and when the text input is complete).

Answer 3

According to this link:

keydown

Fires when the user depresses a key. It repeats while the user keeps the key depressed.

keypress

Fires when an actual Character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.

keyup

Fires when the user releases a key, after the default action of that key has been performed

Or, in kids: The difference between them is the order that occurs, the moment the user presses a key. In theory, events keydown and keyup represent the key being pressed or released, respectively, while the event keypress represents a character being typed (and repeats if the user continues holding the key). The point is that this theory is not implemented in the same way by all browsers.