JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。
在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift + 1这个事件。[1]
但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress事件的。
传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的,返回值为布尔值。还有一个metaKey属性,但IE表示不支持。
既然是比较三者的异同,第一件事肯定就是去了解它们的定义:
keyCode 属性返回onpress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。
两种代码类型的区别是:
字符代码 - 表示 ASCII 字符的数字
键盘代码 - 表示键盘上真实键的数字
charCode 属性返回onpress事件触发键值的字母代码,仅用于字符代码。
which属性和keyCode类似,但是不兼容IE8以下的浏览器。
下面再来说说让人头疼的浏览器问题:兼容性!
1、在不同浏览器下如何转化为字符
(1)FireFox、Opera、Chrome
事件对应的函数有一个隐藏的变量e,表示发生事件。
e有一个属性e.which指示哪个键被按下,给出该键的索引值(按键码)。
静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。
eg:
1 <input type="text" id="text"> 2 <script> 3 document.getElementById("text").onkeypress = function(e) { 4 alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which)); 5 }; 6 </script>
FireFox、Opera、Chrome输入“a”;
输出: “按键码:97 字符:a”
(2) IE
IE不需要e变量,window.event表示发生事件。
window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。
静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。
eg:
1 <input type="text" id="text"> 2 <script> 3 document.getElementById("text").onkeypress = function() { 4 alert("按键码: " + window.event.keyCode + " 字符: " + String.fromCharCode(window.event.keyCode)); 5 }; 6 </script>
IE中输入:a
输出:按键码:97 字符:a
2、如何判断浏览器类型
利用navigator对象的appName属性。
IE:navigator.appName=="Microsoft Internet Explorer"
FireFox、Opera、Chrome:navigator.appName=="Netscape"
eg:
<input type="text" id="text"> <script> document.getElementById("text"). = (navigator.appName == "Microsoft Internet Explorer" alert("按键码: " + window.event.keyCode + " 字符: " + } (navigator.appName == "Netscape" alert("按键码: " + e.which + " 字符: " + </script>
IE、FireFox、Opera、Chrome中输入:a
输出:按键码:97 字符:a
由于当前浏览器没有相应属性的话会返回undefined,因此,利用||运算符简化如下:
1 <input type="text" id="text"> 2 <script> 3 document.getElementById("text").onkeypress = function(e) { 4 e = e || window.event; 5 key = e.keyCode || e.which || e.charCode; 6 alert("按键码: " + key + " 字符: " + String.fromCharCode(key)); 7 }; 8 </script>
注意:IE只有keyCode属性,FireFox中有which和charCode属性,Opera中有keyCode和which属性,Chrome中有keyCode、which和charCode属性。IE8 及其更早版本不支持 which 属性。“DOM3级”提出的key属性虽好,由于兼容性问题,所以不建议用!
总结:在keydown事件里面,事件包括了keyCode - 用户按下的键的物理编码。在keypress里,keyCode包含了字符编码,即表示字符的ASCII编码。这样的形式适用于所以浏览器,除了火狐,它在keypress事件中的keyCode返回值为0;如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keycode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输入的字符,那么就使用keypress来获取,然后获取charCode【火狐或Safari】或keyCode【其他浏览器】。
附:keyPress和keyDown、keyUp之间的差别:
1、keyPress首要用来捕获可打印的字符。比如数字(重视:包含Shift+数字的符号)、字母(重视:包含大小写)、小键盘等除了F1-F12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock...
2、keyPress只能捕获单个字符,keyDown和keyUp可以捕获组合键。
3、keyPress可以捕获单个字符的大小写。
4、keyDown和keyUp对于单个字符捕获的keyValue都是一个值,也就是不区分单个字符的大小写。
5、keyPress不区分小键盘和主键盘的数字字符。keyDown和keyUp区分小键盘和主键盘的数字字符。
6、此中PrScrn按键keyPress、keyDown和keyUp都不能捕获。
转载于:https://blog.51cto.com/13039401/1940421
JS键盘事件对象之keyCode、charCode、which属性对比相关推荐
- 操作键盘事件源码解析(常用的鼠标事件、 键盘事件对象之keyCode属性)
操作键盘事件 常用的鼠标事件 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- JS键盘事件最全keycode代码
2019独角兽企业重金招聘Python工程师标准>>> keycode 8 = BackSpace 回格 keycode 9 = Tab keycode 12 = ...
- JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
- java怎么实现人物的行走,js键盘事件实现人物的行走
本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下 描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果. 用到的图: 效果: 代码: Ti ...
- Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件 键盘事件 在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值 键盘事件 在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
- 用JS键盘事件来移动图片
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡 撰写时间:2022/4/18 小时候都玩过下水道修理工的游戏吧,那其实是一个很简单的小游戏,用简单的JS技术就可以实现,现在我来示范一下最简单 ...
- 105_键盘事件对象
1. 当发生keydown.keypress和 keyup事件时, 它们的执行函数都会传递KeyboardEvent(键盘事件对象)参数. 2. KeyboardEvent.ctrlKey事件属性 2 ...
- JS键盘事件(非常详细)
在JavaScript中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种 ...
- JS键盘事件获取键盘码
JS中的键盘事件 keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种 连续操作.该事件处理函数返回 false 时,会取消默认的动作(如输入 ...
- JS键盘事件—onkeydown,onkeyup
键盘事件 onkeydown 按键被按下 对于某个按键一直按着不放,则事件会一直触发 当onkeydown连续触发式,第一次和第二次之间会有一个间隔时间,其他之后会非常的快 这种设计是为了防止我们误操 ...
最新文章
- 各种平台下Perl模块的安装方法
- Pytorch 自定义激活函数前向与反向传播 sigmoid
- git远程分支修改名字
- 25 SD配置-主数据-信用管理-定义信用段
- 万能Ghost全攻略(最详细完整的教程)
- 智能优化算法:萤火虫算法-附代码
- 三面网易,四面阿里,五年开发经验程序员剑指大厂,稳拿P7offer
- 计算机文件删除怎么恢复,电脑删除文件怎么恢复
- 云寻觅中文分词 (Yunxunmi Chinese Word Segmentation) ,词汇440万,10万字文章分词并计算频率不超过1秒
- 关于微信小程序申请及个人信息和微信账号的问题
- 灼口综合征的症状这么多呢呀?!
- 摆的频率公式_频率与转速的公式
- DFS(深度优先搜索算法)入门保姆级超详解
- 二十四节气-谷雨文案、海报分享,谷雨润万物,不觉夏已至。
- python终端命令执行提示找不到自定义模块
- 深入理解流,什么是流?
- 盛志凡:TVOS技术解读
- 杰奇为什么只能用php5.2,杰奇小说1.7程序用php5.3
- win7c盘分区工具
- RK808去掉低于3.5V关机