KeyboardEvent keyCode Property

Definition and Usage

The keyCode property returns the Unicode character code of the key that triggered the onkeypress event, or the Unicode key code of the key that triggered the onkeydown or onkeyup event.

The difference between the two code types:

  • Character codes - A number which represents an ASCII character
  • Key codes - A number which represents an actual key on the keyboard

These types do not always mean the same thing; for example, a lower case "w" and an upper case "W" have the same keyboard code, because the key that is pressed on the keyboard is the same (just "W" = the number "87"), but a different character code because the resulting character is different (either "w" or "W", which is "119" or "87") - See "More Examples" below to better understand it.

Tip: To find out if the user is pressing a printable key (e.g. "a" or "5"), it is recommended to use this property on the onkeypress event. To find out if the user is pressing a function key (e.g. "F1", "CAPS LOCK" or "Home") use the onkeydown or onkeyup event.

Note: In Firefox, the keyCode property does not work on the onkeypress event (will only return 0). For a cross-browser solution, use the which property together with keyCode, e.g:

which

Tip: For a list of all Unicode characters, please study our Complete Unicode Reference.

Tip: If you want to convert the returned Unicode value into a character, use the fromCharCode() method.

Note: This property is read-only.

Note: Both the keyCode and which property is provided for compatibility only. The latest version of the DOM Events Specification recommend using the key property instead (if available).

Tip: If you want to find out whether the "ALT", "CTRL", "META" or "SHIFT" key was pressed when a key event occured, use the altKeyctrlKeymetaKey or shiftKeyproperty.

Example

Using onkeypress and onkeydown to demonstrate the differences between character codes and keyboard codes:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">

function uniCharCode(event) {
    var char = event.which || event.keyCode;
    document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}

function uniKeyCode(event) {
    var key = event.keyCode;
    document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

When pressing the "a" key on the keyboard (not using caps lock), the result of char and key will be:

Unicode CHARACTER code: 97
Unicode KEY code: 65

https://www.w3schools.com/jsref/event_key_keycode.asp请参考官方网站

时间: 2024-07-28 12:41:53

KeyboardEvent keyCode Property的相关文章

Document Object Model (DOM) Level 3 Events Specification

Document Object Model (DOM) Level 3 Events Specification W3C Working Draft 25 September 2014 This version: http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/ Latest published version: http://www.w3.org/TR/DOM-Level-3-Events/ Latest editor's dr

[Angular] HostListener Method Arguments - Blocking Default Keyboard Behavior

We are going to see how to using method arguments for @HostListener. First, we can use HostListener without method arguments: @HostListener('dblclick') toggle(){ this.collapsed = !this.collapsed; } It works fine. But if we need to get the $event obje

js原生创建模拟事件和自定义事件的方法

让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 1. 模拟鼠标事件 MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().我们使用如下页面做测试 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-CN"> 4

csharp: Linq keyword example

/// <summary> /// http://www.dotnetperls.com/linq /// </summary> public partial class LinqForm : Form { const int _max = 1000000; /// <summary> /// Linq keyword /// </summary> public enum CheckLinq { Distinct, Union, Intersect, Exc

[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange

@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { if(keyCode !== TAB) { $event.preventDefault(); } // get value for the key const val = String.fromCharCode(keyCode); // get position const cursorPos = t

e.key &amp;&amp; e.which &amp;&amp; e.keyCode

官方推荐用e.key来描述状态码,其他两种属性可能会在未来被废弃. 且key,keyCode和which 为只读属性 但是会有浏览器兼容性的问题,可以采用如下代码: let key = ''; if (e.key) { // onKeyDown,对应的e.key = 'ArrowDown ArrowUp Enter'等 key = e.key; } else { let code = e.which || e.keyCode; key = String.fromCharCode(code); }

兼容IE和Firefox获得keyBoardEvent对象

<input type="text" name="words" id="search_txt" class="seachIput fl" placeholder="输入问题,快速找到答案"  onkeydown="search(event)" /> function search(evt) { evt = (evt) ? evt : ((window.event) ? win

Javascript和jquery事件--键盘事件KeyboardEvent

Js和jq事件-键盘事件KeyboardEvent 键盘事件keydown,keypress和keyup,还需要涉及到一个文本事件textInput. keydown,keypress和keyup事件在js和jq中都支持.但是你想要触发这三个事件,必须有文本输入操作(该元素是,或者包含的子元素是文本输入元素-通过冒泡触发). 三个事件的触发顺序是按下键盘会触发keydown,keypress,如果按着键盘不放则会反复触发这两个事件,当放开键盘的时候触发keyup.对于键盘上每个按键,这三个事件都

python中的property

property(fget=None, fset=None, fdel=None, doc=None) -> property attribute fget is a function to be used for getting an attribute value, and likewise fset is a function for setting, and fdel a function for del'ing, an attribute. Typical use is to defi