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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
Underscore源码分析
Dec 30 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
用jscript实现新建word文档
2007/06/15 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jquery操作select大全
2014/04/25 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
python 通过文件夹导入包的操作
2020/06/01 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
医生自荐信
2013/10/11 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
小学班主任自我评价
2015/03/11 职场文书
正规欠条模板
2015/07/03 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android