Keyboard events

Types of keyboard events

Keyboard events are triggered by the user hitting the keyboard. There are mainly three events keydown, keypress, and keyup, all of which inherit the KeyboardEvent interface.

-keydown: Triggered when the keyboard is pressed. -keypress: Triggered when a key with a value is pressed, that is, when a key with no value such as Ctrl, Alt, Shift, and Meta is pressed, this event will not be triggered. For a key with a value, the keydown event is triggered first when pressed, and then this event is triggered. -keyup: This event is triggered when the keyboard is released.

If the user keeps pressing the keys, the keyboard events will be triggered continuously. The trigger sequence is as follows.

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. ... (Repeat the above process)
  6. keyup

KeyboardEvent interface overview

The KeyboardEvent interface is used to describe the user's interaction with the keyboard. This interface inherits the Event interface and defines its own instance attributes and instance methods.

The browser natively provides the KeyboardEvent constructor to create new instances of keyboard events.

new KeyboardEvent(type, options);

The KeyboardEvent constructor accepts two parameters. The first parameter is a string, which indicates the event type; the second parameter is an event configuration object, which is optional. In addition to the attributes provided by the Event interface, the following fields can also be configured, all of which are optional.

-key: string, the currently pressed key, the default is an empty string. -code: string, which represents the string form of the currently pressed key, the default is an empty string. -location: Integer, the location of the currently pressed key, the default is 0. -ctrlKey: Boolean value, whether to press the Ctrl key, the default is false. -shiftKey: Boolean value, whether to press the Shift key, the default is false. -altKey: Boolean value, whether to press the Alt key, the default is false. -metaKey: Boolean value, whether to press the Meta key, the default is false. -repeat: Boolean value, whether to repeat the key press, the default is false.

Instance properties of KeyboardEvent

KeyboardEvent.altKey, KeyboardEvent.ctrlKey, KeyboardEvent.metaKey, KeyboardEvent.shiftKey

The following attributes are all read-only attributes and return a Boolean value indicating whether the corresponding key is pressed.

-KeyboardEvent.altKey: Whether to press the Alt key -KeyboardEvent.ctrlKey: Whether to press the Ctrl key -KeyboardEvent.metaKey: Whether to press the meta key (Mac system is a four-petal flower, Windows system is the windows key) -KeyboardEvent.shiftKey: Whether to press the Shift key

The following is an example.

function showChar(e) {
  console.log("ALT: " + e.altKey);
  console.log("CTRL: " + e.ctrlKey);
  console.log("Meta: " + e.metaKey);
  console.log("Shift: " + e.shiftKey);
}

document.body.addEventListener("keydown", showChar, false);

KeyboardEvent.code

The KeyboardEvent.code property returns a string representing the string form of the currently pressed key. This attribute is read-only.

The following are the string forms of some commonly used keys. For other keys, please refer to Document.

-Number keys 0-9: return to digit0-digit9 -Letter keys A-z: return to KeyA-KeyZ -Function keys F1-F12: return to F1-F12 -Arrow keys: return to ArrowDown, ArrowUp, ArrowLeft, ArrowRight -Alt key: return to AltLeft or AltRight -Shift key: return to ShiftLeft or ShiftRight -Ctrl key: return to ControlLeft or ControlRight

KeyboardEvent.key

The KeyboardEvent.key property returns a string representing the name of the key that was pressed. This attribute is read-only.

If the pressed key represents a printable character, this character is returned, such as numbers and letters.

If the pressed key represents a non-printable special character, the predefined key value is returned, such as Backspace, Tab, Enter, Shift, Control, Alt, CapsLock, Esc, Spacebar, PageUp, PageDown, End, Home, Left, Right , Up, Down, PrintScreen, Insert, Del, Win, F1 ~ F12, NumLock, Scroll, etc.

If you press a control key and a symbol key at the same time, the key name of the symbol key is returned. For example, pressing Ctrl + a will return a; pressing Shift + a will return capital A.

If the key name cannot be recognized, the string Unidentified is returned.

KeyboardEvent.location

The KeyboardEvent.location property returns an integer that indicates which area of ​​the keyboard the key is pressed. It may take the following values.

-0: It is in the main area of ​​the keyboard, or it is impossible to determine which area it is in. -1: Located on the left side of the keyboard, only those keys with two positions (such as Ctrl and Shift keys) are applicable. -2: Located on the right side of the keyboard, only those keys with two positions (such as Ctrl and Shift keys) are applicable. -3: On the numeric keypad.

KeyboardEvent.repeat

KeyboardEvent.repeat returns a boolean value, which represents whether the key is pressed and held, in order to determine whether to repeat the key, that is, the browser will continue to trigger the keydown and keypress events until the user releases the hand.

KeyboardEvent instance method

KeyboardEvent.getModifierState()

The KeyboardEvent.getModifierState() method returns a boolean value indicating whether the specified function key is pressed or activated. Its commonly used parameters are as follows.

-Alt: Alt key -CapsLock: Caps lock key -Control: Ctrl key -Meta: Meta key -NumLock: Numeric keyboard opening key -Shift: Shift key

if (
  event.getModifierState("Control") +
    event.getModifierState("Alt") +
    event.getModifierState("Meta") >
  1
) {
  return;
}

The above code means that as long as you press any two or more keys in Control, Alt, and Meta, it will return.