Keyboard events keydown, keypress, keyup and text events

keyboard event

Types of keyboard events:

• keydown
• keypress
• keyup

Keyboard event definition:

1. keydown (triggered when the key is pressed)

When pressing any key on the keyboard

2. keypress (similar to keydown, mainly used to capture numbers, letters, keypads)

Similar to the keydown event, it is also triggered when the key is pressed.

3. keyup (triggered when the key is lifted)

Fires when a previously pressed key is released

Event trigger sequence:

window.onkeypress = function () {
    console.log("keypress!!!");
}
window.onkeydown = function () {
    console.log("keydown!!!");
}
window.onkeyup = function () {
    console.log("keyup!!!");
}

When a key is pressed at random, the following sequence occurs:

The difference between the three keyboard events:

① The keydown and keyup events can accept key combinations, while keypress can only accept a single key.

② In the keypress event, when the system key (such as: ↑ , ↓ , function key, etc.) is pressed, it cannot be triggered, but the keydown and keyup events can be triggered.

③ (emphasis) In the keypress event, the numeric symbols of the small keyboard and the main keyboard cannot be distinguished, and the keycode value is considered to be the same

(When you press 1 of the small keyboard and 1 of the numeric symbol of the main keyboard, its keycode value is the same)

And in keydown and keyup are distinguishable:

(When you press 1 of the small keyboard and 1 of the numeric symbol of the main keyboard, its keycode value is different)

Such as:

document.querySelector("textarea").onkeydown = function (event) {
    var code = window.event?event.keyCode:event.which;
    console.log("通过keydown事件得到的keycode值："+code);
}
document.querySelector("textarea").onkeyup = function (event) {
    var code = window.event?event.keyCode:event.which;
    console.log("通过keyup事件得到的keycode值："+code);
}
document.querySelector("textarea").onkeypress = function (event) {
    var code = window.event?event.keyCode:event.which;
    console.log("通过keypress事件得到的keycode值："+code);
}

It is known that:

1.   The keypress event only recognizes the keys of the main keyboard, and the keycode value of the keys of the small keyboard corresponds to the keycode value of the numeric symbols of the main keyboard.

2.   The keydown and keyup events can recognize both the main keyboard key and the small keyboard key, and have a unique keycode value.

④ (emphasis) The keycode value obtained by the keypress event is different except that the keycode value of the numeric character pressed on the main keyboard is the same as that of the keydown and keyup events.

Compatible notation to get the keycode value:

• First get the event object (representing the state of the event)

event = event || window.event;//获取到事件对象

• Get the keycode value (compatible writing)

var code = event.keyCode || event.which || event.charCode;

Added: fromCharCode() method

The String.fromCharCode() method is a static method of String.

Accepts one or more specified Unicode values ​​and returns a string.
That is : According to the corresponding Unicode value, output the corresponding character in the form of a string (case-insensitive).
For example: getting "HELLO WORD" based on the Unicode value
will get:

document.write(String.fromCharCode(72,69,76,76,79,32,87,79,82,68));

text event textInput

The textInput event fires before text is inserted into the textbox.

Note:
① Only the editable area can trigger the textInput event (text box, etc.)
② The event (number, character, etc.) can only be triggered by typing a key that changes the content of the text box
③ When binding an event, you can only use addEventListener( ) to bind, other methods are invalid

textarea.addEventListener("textInput",function (event) {
    event = event || window.event;
    console.log(event);
});

④ Obtain the entered characters through the data attribute of the event object