KeyCode 查询表

更新日期: 2021-05-28阅读: 1.6k标签: 键盘

js写代码时,可能捕获按下的键盘消息,此时可以用Keycode对照表来判断按下的是哪个按键。整理了一下方便大家以后使用参考。


KeyCode 查询表

字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码

A

65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

    

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码

0

96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102

  .

110         
7

  103

/ 111        

    

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 '" 222



JS中Keycode事件代码:

keyCode 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。

两种代码类型的区别是:

字符代码 - 表示 ASCII 字符的数字
键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的,例如小写字符 "w" 和大写字符 "W" 有相同的键盘代码,因为他们他们键盘上 ( "W" 代码为 "87"),但是它们有不同的字符代码,两个字符输出是不一样的( "w" 和 "W" 字符代码为 "119" 和 "87") - 查看以下实例可以更好的理解。

提示: 

如果需要知道用户按下的是打印键 (如 "a" 或 "5"),建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 "F1", "CAPS LOCK" 或 "Home") 可使用 onkeydown 或 onkeyup 事件。
在 Firefox 中,, keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决:
var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

注意: 

如果你需要将 Unicode 值转换为字符,可以使用 fromCharCode() 方法。
该属性是只读的。
which 和 keyCode 属性提供了解决浏览器的兼容性的方法,最新版本的 dom 事件推荐使用 key 属性来替代该方法。
如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键,可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。

示例: 

<p>在输入框中输入键盘上的字符获取按下字母的 Unicode 字符代码。</p>
<input type="text" size="40" onkeypress="myFunction(event)">

<script>
/* 在实例中,我们使用了支持多浏览器的方法,因为 keyCode 属性无法再 Firefox 浏览器中工作。但是 which 属性可以。
如果浏览器支持 event.which 则使用 event.which,否则使用 event.keyCode */
function myFunction(event) {
var x = event.which || event.keyCode;
document.getElementById("demo").innerhtml = " Unicode 值为: " + x;
}
</script>


链接: https://fly63.com/article/detial/10356

html的原生自定义键盘(数字版)

前端现在很多时候,由于要限制文本的输入格式(这里指只允许输入数字),常常需要使用到自定义键盘。自定义键盘难免涉及到复用,资源占用等问题,有时候还会由于封装不好导致事件混乱、或者由于动画效果没实现好导致看上去很尴尬

移动端input框被虚拟键盘挡住的js解决方法

在webapp开发过程中,当用户切换输入法额时候,会出现输入框被弹起的虚拟键盘遮挡住的情况,这时用户输入只能盲填 ,这会验证影响用户体验。

微信小程序仿input组件、虚拟键盘

仿照微信支付界面,金额输入框不能用input;要有光标,点击输入框调起虚拟键盘,点击输入框以外的地方隐藏输入框;第一个输入的是小数点要补全,比如:第一个输入的是小数点,则输入框显示为 0. ;

ionic开发中,输入法键盘弹出遮挡住div元素

采用ionic 开发中,遇到键盘弹出遮挡元素的问题。以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮。引用:将命名好的指令名 :popupKeyBoardShow,按驼峰拆开用-连接成小写,如:popup-key-board-show。

关于ios的光标和键盘回弹问题

最近再做项目的时候(移动端),遇到了两个小问题,一个是ios端键盘不回弹的问题(微信浏览器),另一个是ios输入光标位置问题。就是点击一个按钮,要把输入框里面原来的内容加上一些固定的内容,然后一起输出到输入框。

可能这些是你想要的H5软键盘兼容方案

最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失

为什么程序员使用电脑时,很少使用鼠标,只需要键盘就能工作?

现在很多人在使用电脑的时候会特别依赖鼠标,因为使用鼠标操作会比较方便,身边有程序员的人可能会疑惑为什么他们在使用电脑的时候,不需要鼠标,只需要一个键盘就能工作了呢?

通过focusout事件解决IOS键盘收起时界面不归位的问题

今天在开发一个移动端的 H5 页面时,遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构

vue中监听返回键

在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿;利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!