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. [非原创]Office 2019 增强版 批处理激活 亲测成功

    忘了原创网址了,在 https://www.52pojie.cn/ 上看到的,这里我备忘一下,希望知道原创网址的朋友告诉我一下,谢谢! 将下面批处理脚本存成.bat文件后,以管理员方式运行: @ech ...

  2. webdriver(处理select下拉框元素)

    """处理下拉框""" from selenium import webdriver from selenium.webdriver.com ...

  3. Java学习笔记-内部类

    内部类在Android中有着大量的运用 内部类 内部类提供了更好的封装:内部类可以直接访问外部类的私有数据:匿名内部类适合那些只需要使用一次的类.非静态内部类不能拥有静态成员.内部类比外部类可以多使用 ...

  4. Odoo13 新功能:委外

    [ADD] mrp_subcontracting In a few words, it allows to send components to a subcontractor partner and ...

  5. list列表相关操作

    ] ] ] : :-]print(s10)# a.sort(reve# rse=True)# print(a)# a.reverse()# print(a) lst = [], 'wusir','cg ...

  6. 学习笔记:CentOS7学习之十九:Linux网络管理技术

    目录 学习笔记:CentOS7学习之十九:Linux网络管理技术 本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...

  7. 项目中通过单元测试代码中的spring事务是否起作用

    今儿没事,想对代码中事务进行测试,于是乎就创建了一个单元测试进行测试,发现在方法中加上@Transactional注解后,发现在想数据库中插入数据时,代码执行成功,但数据库中却没有数据,于是各种检查, ...

  8. elasticsearch进行远程访问,所面对的问题解决方案

    elasticsearch6.2进行远程访问,修改yml文件后,启动会报错: 上面四个问题解决方案如下: 问题1,问题2,问题3,解决如下: 注意: 针对第二个问题,你可能在limits.d目录中没有 ...

  9. C语言字符串替换

    void exchg(char * str) { if(str == NULL) return; int len = strlen(str); char tmp; for(int i=0,j=len- ...

  10. 认识函数(python)

    一般的函数都是有参数的,函数的参数都是放在函数定义的括号里的,函数参数的命名规则和我们说的变量的命名规则基本一样,一定要清晰明了.(能概括出它的意义,让人阅读你的代码,就知道这个参数是干嘛的就行).当 ...