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. Linux生成ssh密钥免密登录,允许/禁止密码登录,允许/禁止root远程登录,更改ssh端口

    进入想要使用密钥登录的用户家目录 cd 或 cd ~ 执行密钥创建命令,不行可能需要下载openssh-server与openssh-client ssh-keygen -t rsa -P " ...

  2. du 和 df命令

    测试环境数据库收到磁盘报警时,需要清理部分磁盘空间 df -h 查看整个磁盘占有 找到对应目录 查看每个文件夹占有磁盘量: sudo du -h --max-depth=1 data/ --max-d ...

  3. python xlrd模块

    一.什么是xlrd模块? Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 二.使用介绍 1.常用单元格中的数据类型 类型 含义 e ...

  4. 《C和指针》读书笔记

    1. 三字母词 三字母词即用三个字符合起来表示另一个字符,它可以使C环境在某些缺少一些必需字符的字符集上实现. ??( [ ??< { ??= # ??) ] ??> } ??/ \ ?? ...

  5. poj2486 Apple Tree (树形dp+分组背包)

    题目链接:https://vjudge.net/problem/POJ-2486 题意:一棵点权树,起点在1,求最多经过m条边的最大点权和. 思路: 树形dp经典题.用3维状态,dp[u][j][0/ ...

  6. Windows 与 linux文件相互传输的方法

    公司里面办公机器大部分都是 windows 但是现在随着云计算.docker.linux等的越来越兴起,需要大量的操作linux服务器. 最重要和最直接的需要将windows 上面的文件上传到 lin ...

  7. bat命令教程

    转自:https://www.jb51.net/article/151923.htm 第一章 批处理基础 第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合 ...

  8. 怎么才能记住java线程的start()和run()谁是启动方法

    start()和run()开始的时候总是记不住那个是线程的启动方法,现在是记得很真切了! 如果用run()启动线程就跟不用线程效果是一样的,因为是run是顺序执行的.start()才是线程的启动方法. ...

  9. 如何使用RedisTemplate访问Redis数据结构之Hash

    Redis的Hash数据机构 Redis的散列可以让用户将多个键值对存储到一个Redis键里面. public interface HashOperations<H,HK,HV> Hash ...

  10. web前端页面解决中文传参乱码问题

    问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...