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:

  
2 

FireFox、Opera、Chrome输入“a”;

输出: “按键码:97 字符:a”

 

 (2) IE

IE不需要e变量,window.event表示发生事件。

window.event有一个属性window.event.keyCode指示哪个键被按下,给出该键的索引值(按键码)。

静态函数String.fromCharCode()可以把索引值(按键码)转化成该键对应的的字符。

eg:

  
2 

IE中输入:a

输出:按键码:97 字符:a

 

2、如何判断浏览器类型

利用navigator对象的appName属性。

IE:navigator.appName=="Microsoft Internet Explorer"

FireFox、Opera、Chrome:navigator.appName=="Netscape"

eg:

JS键盘事件对象之keyCode、charCode、which属性对比

    

JS键盘事件对象之keyCode、charCode、which属性对比

IE、FireFox、Opera、Chrome中输入:a

输出:按键码:97 字符:a

 

 由于当前浏览器没有相应属性的话会返回undefined,因此,利用||运算符简化如下:

JS键盘事件对象之keyCode、charCode、which属性对比

  
2 

JS键盘事件对象之keyCode、charCode、which属性对比

 注意: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都不能捕获。

 


分享题目:JS键盘事件对象之keyCode、charCode、which属性对比
链接分享:http://bzwzjz.com/article/jghodp.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站制作 成都网站制作 成都网站制作 教育网站设计方案 自适应网站建设 网站设计 成都网站设计 响应式网站设计 手机网站制作设计 成都网站建设 成都网站建设公司 成都网站建设 高端品牌网站建设 成都网站建设 网站制作 成都定制网站建设 营销型网站建设 成都网站设计 网站制作公司 成都网站建设 成都网站设计公司 成都网站建设