JavaScript has several keyboard events

Javascript has three types of keyboard events: 1. keydown event, which is triggered when a certain key is pressed on the keyboard; 2. keypress event, which is triggered when a certain keyboard key is pressed and released; 3. keyup event, Fires when a keyboard key is released.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In JavaScript, keyboard events are triggered when the user operates the keyboard.

Keyboard events mainly include the following 3 types:

• keydown: When a key is pressed on the keyboard trigger. If you hold down a key, this event will be triggered continuously, but the Opera browser does not support this continuous operation. When the event handler returns false, the default action (such as inputting keyboard characters, and keypress event response in IE and Safari browsers) will be cancelled.

• keypress: Triggered when a keyboard key is pressed and released. If a key is pressed, this event will be triggered continuously. When the event handler returns false, the default action (such as the entered keyboard characters) will be cancelled.

• keyup: Triggered when a keyboard key is released. This event is only triggered once when the keyboard is released and is not a continuous response state.

When obtaining the key code that the user is pressing, you can use the keydown, keypress and keyup events to obtain this information. The keydown and keypress events are basically synonymous events, and their performances are exactly the same. However, some browsers do not allow the use of the keypress event to obtain key information. All elements support keyboard events, but keyboard events are mostly used in form input.

Example

The following example captures various details of keyboard operations in real time, that is, the keyboard response event type and the corresponding key value.

<textarea id="key"></textarea>
<script>
    var key = document.getElementById("key");
    key.onkeydown =f;  //注册keydown事件处理函数
    key.onkeyup = f;  //注册keyup事件处理函数
    key.onkeypress = f;  //注册keypress事件处理函数
    function f (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
        key.value = s;
    }
</script>

Keyboard event properties

The keyboard defines many properties, as shown in the following table. Use these properties to precisely control keyboard operations. Keyboard event properties generally only exist in the event object when a keyboard-related event occurs, except for the ctrlKey and shiftKey properties, because they can exist in water retention events. For example, a mouse click occurs when the Ctrl or Shift key is pressed.

##keyCodeThis attribute contains the key value of the corresponding key position in the keyboardcharCodeThis attribute contains the Unicode encoding of the corresponding key position in the keyboard, only supported by DOMtargetThe node (containing elements) where the event occurs, only DOM supports srcElementThe event occurs element, only IE supportsshiftKeyWhether the Shift key is pressed, if pressed it returns true, otherwise it is falsectrlKeyWhether the Ctrl key is pressed, return true if pressed, otherwise falsealtKeyWhether the Alt key is pressed, if Returns true when pressed, otherwise falsemetaKeyWhether the Mtea key is pressed, returns true if pressed, otherwise false, only DOM supports

Attributes defined by keyboard events

Attributes	Description

[Related recommendations:

javascript learning tutorial]

The above is the detailed content of JavaScript has several keyboard events. For more information, please follow other related articles on the PHP Chinese website!