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:
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 altKey, ctrlKey, metaKey or shiftKeyproperty.
Example
Using onkeypress and onkeydown to demonstrate the differences between character codes and keyboard codes:
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 KEY code: 65

KeyboardEvent keyCode Property的更多相关文章
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- iOS WebCore的WebEvent和EventHandler
WebEvent是iOS专有的类,负责封装和携带从UIKit得到的系统事件信息,并由WebKit层的WAKResponder子类传递到WebCore的EventHandler. UIKit层的逻辑可参 ...
- node学习笔记之io.sockets
socket.get和socket.set函数已经失效,代码修改如下所示: 服务器端: var httpd = require('http').createServer(handler); var i ...
- 跨域(二)——WebSocket
严格地说,WebSocket技术不属于HTML5,这个技术是对HTTP无状态连接的一种革新,本质就是一种持久性socket连接,在浏览器客户端通过javascript进行初始化连接后,就可以监听相关的 ...
- csharp: Linq keyword example
/// <summary> /// http://www.dotnetperls.com/linq /// </summary> public partial class Li ...
- js原生创建模拟事件和自定义事件的方法
让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...
- [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 ...
- [Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange
@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...
- [Angular HTML] Overwrite input value, String.fromCharCode & input.selectionStart
@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...
随机推荐
- 分布式消息通信之RabbitMQ_01
目录 官网 1. RabbitMQ安装 1.1 Window版安装 1.2 Linux版安装 2. 典型应用场景 3. 基本介绍 3.1 AMQP协议 3.2 RabbitMQ的特性 3.3 工作模型 ...
- Introduction - Welcome
摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第一章<绪论:初识机器学习>中第1课时<欢迎参加机器学习课程>的视频原文字幕.为本人在视频学习过程 ...
- c++学习笔记_1
前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用 第一章 从c到c++ 引用 定义引用时一定要将其初始化成某个变量 引用从一而终,引 ...
- 【VS开发】winsock 错误多 windows.h和winsock2.h的顺序
Windows平台下用C++做网络开发很多时候都会同时包含这两个头文件,如若顺序不当(windows.h先于winsock2.h)就会出现很多莫名其妙的错误.诸如: c:\program files ...
- [CF1065F]Up and Down the Tree_tarjan_树形dp
Up and Down the Tree 题目链接:https://www.luogu.org/problem/CF1065F 数据范围:略. 题解: 我们把每个叶子向它上面$k$个点连边,然后tra ...
- [转帖]SSH远程登录配置文件sshd_config详解
SSH远程登录配置文件sshd_config详解 2016年06月02日 17:42:25 Field_Yang 阅读数 61386 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权 ...
- Selenium工具爬取商品
selenium是一个优秀的自动化测试工具,支持多种语言,具体介绍参考官方文档:https://www.seleniumhq.org/docs/. 下面我们使用selenium工具模拟用户点击商品详情 ...
- S03_CH03_AXI_DMA_OV7725摄像头采集系统
S03_CH03_AXI_DMA_OV7725摄像头采集系统 3.1概述 本课程讲解如何搭建基于DMA的图形系统,方案原理如下. 摄像头采样图像数据后通过DMA送入到DDR,在PS部分产生DMA接收中 ...
- S02_CH06_XADC实验
S02_CH06_XADC实验 6.1实验概述 这次借助zynq的内嵌的XADC来采集zynq内部的一些参数: •VCCINT:内部PL核心电压 •VCCAUX:辅助PL电压 •VREFP:XADC正 ...
- Python利用PIL将数值矩阵转化为图像
要求:输入一个n*n的矩阵,矩阵包括从-1到1的浮点数,将其转化为可视化图像 调库 from PIL import Image import numpy as np import math 载入图像, ...