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.
Attributes | Description |
---|---|
This attribute contains the key value of the corresponding key position in the keyboard | |
This attribute contains the Unicode encoding of the corresponding key position in the keyboard, only supported by DOM | |
The node (containing elements) where the event occurs, only DOM supports | |
The event occurs element, only IE supports | |
Whether the Shift key is pressed, if pressed it returns true, otherwise it is false | |
Whether the Ctrl key is pressed, return true if pressed, otherwise false | |
Whether the Alt key is pressed, if Returns true when pressed, otherwise false | |
Whether the Mtea key is pressed, returns true if pressed, otherwise false, only DOM supports |
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!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Chinese version
Chinese version, very easy to use

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Mac version
God-level code editing software (SublimeText3)
