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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JavaScript函数基础详解
Feb 03 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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正则修正符用法实例详解
2016/12/29 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
JS 时间显示效果代码
2009/08/23 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Javascript之String对象详解
2016/06/08 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python输出带颜色的字符串实例
2017/10/10 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
python实现吃苹果小游戏
2020/03/21 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
工程班组长岗位职责
2013/12/30 职场文书
会计辞职信范文
2014/01/15 职场文书
承诺书范文
2014/06/03 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
党支部综合考察意见
2015/06/01 职场文书
新闻稿怎么写
2015/07/18 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python