zoukankan      html  css  js  c++  java
  • onkeypress、onkeydown、onkeyup

    在使用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 ~

  • 相关阅读:
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 实现业务
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 开发流程
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 报表系统集成说明
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 处理报表
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 数据访问
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 分布式应用
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 实现插件
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 对象设计器使用帮助
    基于DotNet构件技术的企业级敏捷软件开发平台 AgileEAS.NET平台开发指南 数据层开发
    Jquery 中的CheckBox、 RadioButton、 DropDownList、CheckBoxList、RadioButtonList的取值赋值
  • 原文地址:https://www.cnblogs.com/qshting/p/5845464.html
Copyright © 2011-2022 走看看