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请参考官方网站

KeyboardEvent keyCode Property的更多相关文章

  1. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  2. iOS WebCore的WebEvent和EventHandler

    WebEvent是iOS专有的类,负责封装和携带从UIKit得到的系统事件信息,并由WebKit层的WAKResponder子类传递到WebCore的EventHandler. UIKit层的逻辑可参 ...

  3. node学习笔记之io.sockets

    socket.get和socket.set函数已经失效,代码修改如下所示: 服务器端: var httpd = require('http').createServer(handler); var i ...

  4. 跨域(二)——WebSocket

    严格地说,WebSocket技术不属于HTML5,这个技术是对HTTP无状态连接的一种革新,本质就是一种持久性socket连接,在浏览器客户端通过javascript进行初始化连接后,就可以监听相关的 ...

  5. csharp: Linq keyword example

    /// <summary> /// http://www.dotnetperls.com/linq /// </summary> public partial class Li ...

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

    让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...

  7. [Angular] The Select DOM Event and Enabling Text Copy

    When we "Tab" into a input field, we want to select all the content, if we start typing, i ...

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

    @HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...

  9. [Angular HTML] Overwrite input value, String.fromCharCode & input.selectionStart

    @HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...

随机推荐

  1. eNSP——ARP及ProxyARP

    原理: ARP (Address Resolution Protocol)是用来将IP地址解析为MAC地址的协议.ARP表项可以分为动态和静态两种类型.动态ARP是利用ARP广播报文,动态执行并自动进 ...

  2. Mybatis插件之Mybatis-Plus(传统模式)

    1.什么是Mybatis-Plus? Mybatis-Plus(简称MP),是一个Mybatis的增强工具,可以在原来Mybatis基础上不错任何改变就能够对原来Mybatis进行增强,能够简化我们的 ...

  3. [转帖]XCopy复制文件夹命令及参数详解以及xcopy拷贝目录并排除特定文件

    XCopy复制文件夹命令及参数详解以及xcopy拷贝目录并排除特定文件 https://www.cnblogs.com/smartsmile/p/7665979.html xcopy dirA dir ...

  4. 开发者福利!请及时领取您的SpreadJS临时部署授权码

    SpreadJS 于2015年发布,至今已有4年历史,作为一款基于 HTML5 的纯前端电子表格控件,在短短四年间,即在财税.金融.计算机软件与服务.工业制造.大数据应用.电力能源.交通.物流运输.医 ...

  5. Core dump文件和ECFS

    core dump文件 core dump核心转储文件,一些信号的处理方式,会生成一个elf格式的文件,用来分析进程崩溃情况. 总结一下,core dump核心转储文件就是将所有的vma都映射成一个e ...

  6. Web文件上传靶场 - 通关笔记

    Web应用程序通常会提供一些上传功能,比如上传头像,图片资源等,只要与资源传输有关的地方就可能存在上传漏洞,上传漏洞归根结底是程序员在对用户文件上传时控制不足或者是处理的缺陷导致的,文件上传漏洞在渗透 ...

  7. 缩放动画(ScaleTransform)

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  8. c#学习笔记-string stringBuilder

    string aTest = "abc";//分配固定的内存大小 aTest += "ddd"; //销毁原先的数据再来分配,消耗大 StringBuilder ...

  9. Android应用市场App发布

    来自知乎 Android应用市场App发布说到官方渠道,不得不说一些主要的大市场了,如:360.小米.应用宝.91.安卓.百度.豌豆荚.安智.现在我来一一说它们的一些简单特点. 1,360 (1)当天 ...

  10. gitlab 搭建

     一.ubuntu搭建gitlab     1. 如果以前有安装过gitlab请根据以下步骤来删除 https://www.cnblogs.com/shansongxian/p/6678110.htm ...