keydown和keyup事件时keyCode属性判断和值获取方法

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

用户在使用键盘时会触发键盘事件。“DOM2 级事件”初规定了键盘事件，但在终定稿之前又 删除了相应的内容。结果，对键盘事件的支持主要遵循的是 DOM0级。
? ? ? ? “DOM3级事件”为键盘事件制定了规范，IE9率先完全实现了该规范。其他浏览器也在着手实现这 一标准，但仍然有很多遗留的问题。 有 3个键盘事件，简述如下。?
? ? ? ? keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。?
? ? ? ? keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
? ? ? ? 按下 Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发 keypress 事件。
? ? ? ?keyup：当用户释放键盘上的键时触发。
? ? ? ? 虽然所有元素都支持以上 3个事件，但只有在用户通过文本框输入文本时才常用到。?
? ? ? ?只有一个文本事件：textInput。这个事件是对 keypress 的补充，用意是在将文本显示给用户之 前更容易拦截文本。在文本插入文本框之前会触发 textInput 事件。?
? ? ? ?在用户按了一下键盘上的字符键时，首先会触发 keydown 事件，然后紧跟着是 keypress 事件， 后会触发 keyup 事件。其中，keydown 和 keypress 都是在文本框发生变化之前被触发的；而 keyup 事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发 keydown 和 keypress 事件，直到用户松开该键为止。 如果用户按下的是一个非字符键，那么首先会触发 keydown 事件，然后就是 keyup 事件。
? ? ? ?如果按 住这个非字符键不放，那么就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup 事件。 ? ? ? ?键盘事件与鼠标事件一样，都支持相同的修改键。而且，键盘事件的事件对象中 也有 shiftKey、ctrlKey、altKey 和 metaKey 属性。IE不支持 metaKey。
? ? ? ?我们先来介绍下键码 后面若不需要加班，南昌网站建设公司网络前端开发工程师会接着向大家介绍textInput,因为这是对keypress事件的补充。
? ? ? ?在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性中会包含一个代码，与键盘上一 个特定的键对应。对数字字母字符键，keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相 同。因此，数字键 7的 keyCode 值为 55，而字母 A键的 keyCode 值为 65——与 Shift键的状态无关。 DOM和 IE的 event 对象都支持 keyCode 属性。南昌网站制作公司网络前端工程师结合实例向大家介绍，请看下面这个例子：





? ? ? ?


? ? ? ?
? ? ? ?


? ? ? ?在这个例子中，用户每次在文本框中按键触发 keyup 事件时，都会显示 keyCode 的值。下表列出 了所有非字符键的键码。?
键 键 码 键 键 码
退格（Backspace） 8 数字小键盘1 97
制表（Tab） 9 数字小键盘2 98
回车（Enter） 13 数字小键盘3 99
上档（Shift） 16 数字小键盘4 100
控制（Ctrl） 17 数字小键盘5 101
Alt 18 数字小键盘6 102
暂停/中断（Pause/Break） 19 数字小键盘7 103
大写锁定（Caps Lock） 20 数字小键盘8 104
退出（Esc） 27 数字小键盘9 105
上翻页（Page Up） 33 数字小键盘+ 107
下翻页（Page Down） 34 数字小键盘及大键盘上的- 109
结尾（End） 35 数字小键盘 . 110
开头（Home） 36 数字小键盘 / 111
左箭头（Left Arrow） 37 F1 112
上箭头（Up Arrow） 38 F2 113
右箭头（Right Arrow） 39 F3 114
下箭头（Down Arrow） 70 F4 115
插入（Ins） 45 F5 116
删除（Del） 46 F6 117
左Windows键 91 F7 118
右Windows键 92 F8 119
上下文菜单键 93 F9 120
数字小键盘0 96 F10 121
正斜杠 191 F11 122
沉音符（`） 192 F12 123
等于 61 数字锁（Num Lock） 144
左方括号 219 滚动锁（Scroll Lock） 145
反斜杠（） 220 分号（IE/Safari/Chrome中） 186
右方括号 221 分号（Opera/FF中） 59
单引号 222 小于 188
? 大于 190 ? ? ? ?无论keydown或keyup事件都会存在的一些特殊情况。在Firefox和Opera中，按分号键时keyCode 值为 59，也就是 ASCII中分号的编码；但 IE和 Safari返回 186，即键盘中按键的键码。?
? 本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站制作公司-网络http://www.huicuiwang.cn/如转载请注明出处!