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 ...
随机推荐
- Java进程监控
目录 1.引言 2. 程序启停, 为进程自定义项目名称 3. 操作系统判断 4. 获取进程信息 5. 内存,CPU信息 6. 堆内存信息 7. 端口信息 8. 线程信息 9. MXBean使用样例 9 ...
- linux 系统自签免费ssl证书和nginx配置
首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个key文件的密码.不推荐输入.因为以后要给nginx使用.每次rel ...
- 正确理解使用Vue里的nextTick方法
最近,在项目中要使用Swiper做一个移动端轮播插件.需要先异步动态加载数据后,然后使用v-for渲染节点,再执行插件的滑动轮播行为.解决这个问题,我们通过在组件中使用vm.$nextTick来解决这 ...
- Jmeter对Websocket进行接口压力测试
压力测试是给软件不断加压,强制其在极限的情况下运行,观察它可以运行到何种程度,从而发现性能缺陷,是通过搭建与实际环境相似的测试环境,通过测试程序在同一时间内或某一段时间内,向系统发送预期数量的交易请求 ...
- 安装matplotlib,报错ERROR: Command errored out with exit status 1:
使用pip install matplotlib 出现报错信息: 发现这行报错 : 我是在pycharm上安装的,可是提示我去安装 Microsoft Visual C++ ,然后去百度查了下,发现只 ...
- Graduation(思维,树上取叶子几次取完)
题意:https://codeforces.com/group/ikIh7rsWAl/contest/259944/problem/G 给你一颗树(可能有好几棵),你每次最多只能去掉k个叶子节点,问你 ...
- 7.Linux查找目录下的所有文件中是否含有某个字符串
grep -rn "map" * 说明:-r 是递归查找-n 是显示行号* : 表示当前目录所有文件,也可以是某个文件名
- VS2013 + Nunit 安装搭建
Nunit 官方给我提供了Nunit 3的四种安装方式 第一种 通过NuGet进行Full Nunit安装 第二种 通过NuGet进行轻量级 NunitLite 安装 第三种 通过Zip 压缩包下载安 ...
- linux——环境变量
环境变量 基本概念: 一般是指在操作系统中用来指定操纵系统运行环境的一些参数 当我们用动态库链接成功的时候,其实就是相关的环境变量帮助编译器进行查找. 环境变量通常具有某种特殊用途,还有在系统当中通常 ...
- C++反汇编第一讲,不同作用域下的构造和析构的识别
目录大纲: 1.全局(静态)对象的识别,(全局静态全局一样的,都是编译期间检查,所以当做全局对象看即可.) 1.1 探究本质,理解构造和析构的生成,以及调用方式(重要,如果不想知道,可以看总结.) 2 ...