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. zabbix案例实例

    1 案例1:实现Zabbix报警功能 1.1 问题 沿用第5天Zabbix练习,使用Zabbix实现报警功能,实现以下目标: 监控Linux服务器系统账户 创建Media,设置邮件服务器及收件人邮箱 ...

  2. SpringBoot整合Redis及Redis工具类

    前言 想做一个秒杀项目,问了几个大佬要了项目视频,结果,自己本地实践的时候,发现不太一样,所以写下这篇,为以后做准备. 环境配置 IDE:IDEA 环境:Windows 数据库:Redis Maven ...

  3. find the mincost route【无向图最小环】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1599 Problem Description 杭州有N个景区,景区之间有一些双向的路来连接,现在860 ...

  4. SQL Server 学习之环境搭建

    SQL Server 环境搭建 说明:本文是sqlServer的安装和测试环境的搭建 版本是SQLServer 2005版,由于该版本只能在Windows7或者更低的系统上才能安装,更高的系统请安装S ...

  5. python3连接oracle数据库

    声明:python,cx_Oracle和instantclient的版本应一致 我这里使用的版本是python3.6 64位 ,cx_Oracle-5.3-11g.win-amd64-py3.6-2和 ...

  6. 1.3.3 并发容器类MAP/LIST/SET/QUEUE

    HashMap 下标计算方法:hashCode & (length-1) ,&按位与操作,二进制相同位都是1,该位才为1 JDK1.7与JDK1.8中HashMap区别: JDK1.8 ...

  7. CentOS7 PHP cURL errno 35, 原因:CentOS7中没有安装curl和OpenSSL的最新版

    安装OpenSSL的最新版 话不多说,直接上安装步骤 #cd /usr/local/src # 跳过证书获取失败 # wget https://www.openssl.org/source/opens ...

  8. javascript之取余数、去商、天花板取整、地板取整

    demo1: console.log('//求余数'); //求余数 console.log(5 % 4); console.log(6 % 4); //求商 console.log('//求商'); ...

  9. 怎样通过name属性获取元素节点集合

    使用 document.getElementsByName(); document.getElementsByName("userInfo") instanceof NodeLis ...

  10. SQLException: #22001你知道这个错误码吗

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! java.sql.SQLException: #22001 java.sql.SQLException: #22001 a ...