JavaScript Event学习第十一章 按键的检测


Posted in Javascript onFebruary 10, 2010

第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释。

正如我们了解到的,浏览器在最开始设计的时候并没有一个标准,大家都像做实验似的,最后的成品虽然是有用的,但是肯定造成了兼容性的问题。按键问题也不例外:这里有两个属性能检测到用户按下了什么键,虽然有足够的理由为什么需要两个属性,但是依然并不是所有的浏览器都支持。

另外,在keypress与keydown和keyup之间还有一些很重要的区别。

最后就是windows和mac的区别了,在mac上要检测用户按下了什么键简直比在windows下难了N倍。

keyCode和charCode
能检测到用户按下了什么键的两个属性就是keyCode和charCode了。简单说来:keyCode是用来检测用户真正按下了键盘上那个键的,而charCode则是给出键入字符的ASCII码。有一些小问题需要注意:大写的A和小写的a的keyCode是一样的,因为他们在键盘上就是一个键;但是charCode不一样,因为他俩是两个不同的字符。

IE和Opera不支持charCode。然而他们会在keyCode里面保存字符信息,但是只是在onkeypress的情况下,在onkeydown/up情况下包含的是键的信息。

字符和数字键
让我们以一个简单的例子开始。小写a的ASCII码是97,大写的是65。那么在两种情况下,当用户在键盘上敲下相同的键的时候,什么时候的键值是65呢(相当于大写的A)

keyCode

JavaScript Event学习第十一章 按键的检测

 

charCode

JavaScript Event学习第十一章 按键的检测
因此,在onkeydown/up的情况下,你能够从keyCode里面得到键值。在onkeypress情况下,想要得到字符值就要使用:evt.charCode || evt.keyCode.

标点符号
我还是决定不对标点符号键做测试了。我怀疑这不仅跟浏览器和操作系统有关,还可能跟键盘设置和默认语言有关。我一般用的是荷兰语版的windows,如果跟美国版的101键的键盘相比有很大出入,我一点都不会觉得意外。

比如说shift+,键出来的应该是<,但是我测试的ASCII码的结果却是'?'的。当我发现了这个问题,我决定还是不在标点符号键的问题上浪费时间了.

特别键
功能键就是只那些不能打印出来的但是却具有一定功能的键。比如shift、ESC、enter等等都是功能键。

一些说明:
1、一般,mac的可靠性比windows要差,有些键可能检测不到

2、IE不会触发下面这键的keypress事件:delete, end, enter, escape, 功能键, home, insert, pageUp/Down 和 tab。

3、在onkeypress事件下,Safari会给下面这些键给出很奇怪的keyCode值:delete, end, 功能键, home 和 pageUp.Down。但是在onkeydown/up下面就很正常。

4、Alt,Cmd,Ctrl和shfit键在mac上无法探测,不过Opera下面例外。然而你却可以使用altKey,ctrlKey,shfitKey这些属性。

如果你需要探测这些键,你就探测一下载onkeydown/up下面的keyCode就行了,算是给自己帮忙了,onkeypress和charCode就忘掉吧。

原文后面有个大的键值的列表,还有一个测试框,有兴趣的童鞋可以移步。
翻译地址:http://www.quirksmode.org/js/keys.html

转载请保留以下信息
作者:北玉(tw:@rehawk)

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 #Javascript
jQuery插件 tabBox实现代码
Feb 09 #Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 #Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
Javascript验证方法大全
2015/09/21 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js实现继承的5种方式
2015/12/01 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
itchat接口使用示例
2017/10/23 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
在Python中表示一个对象的方法
2019/06/25 Python
python实现文字版扫雷
2020/04/24 Python
Why we need EJB
2016/10/20 面试题
医院辞职信范文
2014/01/17 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
五年级小学生评语
2014/12/26 职场文书
高三语文复习计划
2015/01/19 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
SQL Server使用导出向导功能
2022/04/08 SQL Server