在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。  
       onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。  
       由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的,而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。  
:在Maxthon浏览器中,onkeydown和onkeyup有连续响应两次键盘事件的BUG,onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题),具体原因不明。不知道以后是否会进行订正。  
  
       键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a.  
  
       在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别.  
  
       还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等  
  
       下面说一下键盘事件的具体使用方法,   
  
       键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)  
  
       在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符

【JavaScript】onKeyDown与onKeyPress事件的异同

从单词意思上理解,onKeyDown和onKeyPress几乎找不到差别。实际上它们的差别也的确不容易识别出来。onKeyDown事件,是在按下某个键时就会触发,如果按着不放,则会一直触发;onKeyPress事件,也是在按下键时触发,但不同的是,这个键必须是字符键,比如说1,2,3,a,b,c,`,在有字符输入的情况下它才会触发,当你按下非字符键如Shift,F4之类的,它是不会触发的。

写一个灰常简单的例子,大家就明白了:
HTML代码:

123 onKeyPress和onKeyDown:<br/>onKeyPress只会在按个某个键并有字符输入的情况下触发,而onKeyDown会在按下任一键时触发<br/><input type="text" id="text1"/><br/> 1234567 var text1 = document.getElementById("text1");text1.onkeypress=function(){ alert('keypress');}text1.onkeydown=function(){ alert('keydown');}

当你按下字符键时,你会发现两个事件都触发了,但有先后顺序,先触发KeyDown,再触发KeyPress。但当你按下非字符键时,就只会触发KeyDown事件,KeyPress则不知所踪。当焦点在文本框时,哪怕你按下的是F5键刷新,onKeyDown也都会触发。

当捕捉的是keypress事件时,当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0 
  
       注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递  
  
       鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件  
  
       键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题

onKeyPress 字母大小写的keyCode不同(如T84,t116同F5)

onKeyDown 字母大小写的keyCode相同

ASCII码

 
 
ASCII码 键盘 ASCII 码 键盘 ASCII 码 键盘 ASCII 码 键盘
27 ESC 32 SPACE 33 ! 34 "
35 # 36 $ 37 % 38 &
39 ' 40 ( 41 ) 42 *
43 + 44 ' 45 - 46 .
47 / 48 0 49 1 50 2
51 3 52 4 53 5 54 6
55 7 56 8 57 9 58 :
59 ; 60 < 61 = 62 >
63 ? 64 @ 65 A 66 B
67 C 68 D 69 E 70 F
71 G 72 H 73 I 74 J
75 K 76 L 77 M 78 N
79 O 80 P 81 Q 82 R
83 S 84 T 85 U 86 V
87 W 88 X 89 Y 90 Z
91 [ 92 / 93 ] 94 ^
95 _ 96 ` 97 a 98 b
99 c 100 d 101 e 102 f
103 g 104 h 105 i 106 j
107 k 108 l 109 m 110 n
111 o 112 p 113 q 114 r
115 s 116 t 117 u 118 v
119 w 120 x 121 y 122 z
123 { 124 | 125 } 126 ~

onkeypress、onkeydown、onkeyup的更多相关文章

  1. 转:onkeypress、onkeydown、onkeyup 区别

    在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事件的执行顺序如下:onkeydown -> onk ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. onkeypress事件.onkeydown事件.onkeyup事件

    onkeypress事件是在按键開始按的时候发生: onkeydown事件是在按键已经按下的时候发生: onkeyup事件是在按键松开(释放)的时候发生.

  4. [转载]onkeydown、onkeypress、onkeyup、onblur、o

    转载链接: http://blog.sina.com.cn/s/blog_697b2dc101014ktb.html onkeydown:按下任何键(字母.数字.系统.tab等)都能触发,且对于字母不 ...

  5. 文本框按键事件onkeydown、onkeypress、onkeyup区别

    当我们在搜索时,会用到这几个事件 onkeydown 是指鼠标按下的那一刻,此时用户不知道按了什么,文本框也不会显示,首先触发的事件 onkeypress 是指鼠标按下然后松开的瞬间,此时仍然获取不到 ...

  6. web前端 -- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别

    FROM:http://www.cnblogs.com/svage/archive/2011/11/15/2249954.html onkeydown:按下任何键(字母.数字.系统.tab等)都能触发 ...

  7. onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别

    onkeydown:按下任何键(字母.数字.系统.tab等)都能触发,且对于字母不区分大小写: onkeypress:按下字母.数字键时触发,且对于字母区分大小写; onkeyup:相应的键和onke ...

  8. Android onKeyDown、onKeyUp、dispatchKeyEvent的区别

    1. onKeyDown.onKeyUp.dispatchKeyEvent的区别和使用场景 区别: 1.1 onKeyDown.onKeyUp是按键事件的回调接口(冒泡式调用),dispatchKey ...

  9. 对话框的按键处理 PreTranslateMessage、OnKeyDown和OnChar

    对话框的按键处理 PreTranslateMessage.OnKeyDown和OnChar 1.MFC对话框不能响应OnKeyDown和OnChar函数(1)现象  在MFC的对话框中,映射了WM_C ...

随机推荐

  1. 【pb_ds】bzoj1056 [HAOI2008]排名系统/bzoj1862 [Zjoi2006]GameZ游戏排名系统

    STL裸题,线下AC,bzoj无限RE ing…… #include<cstdio> #include<cctype> #include<iostream> #in ...

  2. 【记忆化搜索】bzoj1055 [HAOI2008]玩具取名

    f(l,r,c)表示sl...sr能否被合成字符c. #include<cstdio> #include<cstring> using namespace std; int m ...

  3. python基础-文件处理与函数

    1. 文件处理 1.1 文件处理流程 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 1.2 文件读取模式r r文本模式的读,在文件不存在,不会创建新文件 f = ...

  4. 1.6(java学习笔记)static关键字

    static关键字 1.static修饰变量也称静态变量,静态变量存放在静态区被该类的所有对象共享. 例如,定义了一个类class User{static Sring city = "a城& ...

  5. 不仅仅是浏览器 走近Chrome开发人员工具

    Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...

  6. Error: Top-level design entity "demo" is undefined

    原因:顶层模块的module名没有和工程名同名 解决方法:把顶层模块 module名改成和工程名同名 最近在玩QUARTUS 11遇到此问题! 问题补充:本人用的时VERILOG HDL硬件描述语言! ...

  7. javascript常见的数组方法

    1:Array对象用于在单个变量中存储多个值typeof(arrArr) 'object'var arr1 = [];//创建一个空数组eg:数组是个引用类型var a = [1,2,3];var b ...

  8. centos6.9安装xampp后报错:egrep: error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory

    1.centos6.9安装xampp(xampp-linux-x64-7.0.21-0-installer.run)后启动的时候,报错: egrep: error while loading shar ...

  9. javascript快速入门2--变量,小学生数学与简单的交互

    变量 对于变量的理解:变量是数据的代号.如同人的名字一样. var num;//在JavaScript中使用关键字var声明一个变量 在JavaScript中,使用上面的语法,就可以声明一个变量,以便 ...

  10. 【JAVA】StringTokenizer 迭代方式对字符串进行分割

    StringTokenizer是一个用来分隔String的应用类,相当于VB的split函数.1.构造函数public StringTokenizer(String str)public String ...