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

第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的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

image

 

charCode

image
因此,在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)

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
先看界面代码: 复制代码 代码如下: form id="form1" runat="server" div align="center" fieldset table border="0" cellpadding="3" cellspacing="3" tr td 请选择汽车类型: /td /tr tr td asp:DropDownList ID="dllCar" runat="server" ToolTip="至少选择一种车!" CssClass="required" asp:ListItem Valu

Bootstrap基础学习 - 2015-07-15 18:07:22

Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持IE6了,对IE8的支持也很有限,毕竟IE8对HTML5的支持不太好,(说实话,我自己也不喜欢IE6~8,对于我这种初级选手来说,兼容性有时候真费劲,不仅项目上要用,连面试也要用,有没有搞错嘛,遇到了,上网查一下不就行了。发个牢骚,该会的还是得会啊!!!) 闲言碎语不多
javascript Date.getDay()方法按照本地时间返回一周中的一天为所述指定的日期。通过getDay返回的值是对应于星期几的整数:0代表星期日,1代表星期一,2表示星期二,依此类推。 语法 Date.getDay() 下面是参数的详细信息: NA 返回值: 按照本地时间返回星期几为指定日期。 例子: htmlheadtitleJavaScript getDay Method/title/headbodyscript type="text/javascript" var dt = new Da
许多制作网页的朋友常常制作公告板、信息窗,也经常为了实现整版页面和图像的滚屏显示而烦恼,不用着急,这里有一个简单的方法来实现滚屏显示。我们没有采用Java的.class程序来实现,也不是动态DHTML语言,只是充分地利用了JavaScript脚本语言的一些函数,写一些简短的JavaScript脚本语言就可实现这一功能。 原代码如下: html head script language="Javascript" !--//防止错误显示 locate=0; function my_scroller() { i

JS 树形递归实例代码 - 2015-07-15 18:07:19

复制代码 代码如下: var l=json.length; var arr = []; for(var i = 0; i l; i++){ (function(){ var jsonArray =arguments[0]; for(var k in jsonArray){ if(k.indexOf('children') != -1 jsonArray[k] != null){ arguments.callee(jsonArray[k]); } else{ if(k == 'name' || k == '
觉得 Mootools 不可思议?想知道 Dojo 是如何实现的?对 JQuery 的技巧感到好奇?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本。 我们几乎每天都在使用各种各样的JavaScript框架。当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒。这是因为:首先,对于新手来说DOM太难理解了;当然,对于一个API来说难以理解可不是什么好事。其次,浏览器间的兼容性问题非常令人困扰。 我们将元素包装成对象是因为我们想要能够
forEach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值。 var data=[1,2,3,4,5,6];var sum=0;data.forEach(function(v){//其中的v就是数组的值 123456sum+=v;})document.write(sum+"br");//打印出来是21data.forEach(function(o,p,q){//分别对应:数组元素,元素的索引,数组本身 q[p]=o+1;})d
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html head titleDestroydrop Javascripts Tree/title link rel="StyleSheet" href=#>script type="text/javascript" src="dtree.js"/script /head
自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持,以下列元素的类型来创建自定义指令。 Element directives - 指令遇到时激活一个匹配的元素。 Attribute - - 指令遇到时激活一个匹配的属性。 CSS - - 指令遇

Javascript实现字数统计 - 2015-07-15 17:07:47

字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择。 !DOCTYPE htmlhtmlheadmeta charset="utf-8"title测试文件/titlescriptfunction cal_words(){ var length = d