键盘事件keypress 和 keydown、keyup 的用法与区别

最新推荐文章于 2022-08-25 01:39:28 发布

WinSolstice

最新推荐文章于 2022-08-25 01:39:28 发布

阅读量3.2w

点赞数 14

KeyDown：用户摁下摁键时发生
KeyPress：用户摁下摁键，并且产生一个字符时发生
KeyUp：用户释放某一个摁键时触发

定义和用法

完整的 keypress 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发生 keydown 事件。
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。


    <html>  
    <head>  
    <script type="text/javascript" src="/jquery/jquery.js"></script>  
    <script type="text/javascript">  
    $(document).ready(function(){  
      $("input").keydown(function(){  
        $("input").css("background-color","#FFFFCC");  
      });  
      $("input").keyup(function(){  
        $("input").css("background-color","#D6D6FF");  
      });  
    });  
    </script>  
    </head>  
    <body>  
    Enter your name: <input type="text" />  
    <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
    </body>  
    </html>

keyup 是在用户将按键抬起的时候才会触发的，属于整个按键过程中的最后阶段，所以有其特定的用处，就是在左侧输入，右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。

 <html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>无标题页</title>  

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>  

    <script type="text/javascript">  
        $(function() {  
            $('#t1').live('keyup', function() {  
                $('#v1').text($(this).val());  
            });  
            $('#t2').live('keydown', function() {  
                $('#v2').text($(this).val());  
            });  
            $('#t3').live('keypress', function() {  
                $('#v3').text($(this).val());  
            });  
        });      
    </script>  

</head>  
<body>  
    <textarea id="t1"></textarea>  
    <div id="v1">  
    </div>  
    <textarea id="t2"></textarea>  
    <div id="v2">  
    </div>  
    <textarea id="t3"></textarea>  
    <div id="v3">  
    </div>  
</body>  
</html>

这里分别用 keydown 、keyup、keypress做了实验，其中只有 keyup可以完整的将输入内容同步获取到，keydown和keypress总是无法获取到最后一个字符，这说明了三者之间的区别：
keydown 总是在摁键摁下的当时触发，不能得到最后的输入结果，keypress也是一样

这是因为keydown操作后，事件触发了，但值还未显示在文本框中，所以这类操作要用 keyup 一个完整的按键动作后，才可以获取文本框的值。

keydown与keypress更适用于通过键盘控制页面类功能的实现。

获取键盘点击的键位：

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("input").keydown(function(event){   
    $("div").html("Key: " + event.which);  
  });  
});  
</script>  
</head>  
<body>  

请随意键入一些字符：<input type="text" />  
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>  
<div />  

</body>  
</html>

windows 窗体通过引发键盘事件来处理键盘入以响应 windows 消息，大多数 windows 窗体应用程序都通过处理键盘事件以独占方式处理键盘输入。

按键的类型

windows 窗体将键盘输入标识为：由按位 keys 枚举表示的虚拟键代码。

使用 keys 枚举，可以综合一系列按键以生成单个值，这些值与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应。通过处理 keydown 或 keyup 事件可以检测大多数的恶物理按键操作。字符键是 keys 枚举的子集，它们与 WM_KEYDOWN 和 WM_SYSKEYDOWNWindows 消息所伴随的值相对应，如果通过组合按键得到一个字符，则可以处理 keypress 事件来检测该字符。

键盘事件的顺序

用户按 “a”键：则该键将被预处理和调度，而且会发生 keydown 事件
用户按住 “a”键：则该键将被预处理和调度，而且会发生 keypress 事件
用户松开 “a”键：则该键将被预处理和调度，而且会发生 keyup事件

3.键的预处理

像其他消息一样，键盘消息是在窗体或控件的 WindProc 方法中处理的，窗体或控件在处理键盘消息之前 PreProcessMessage 方法会调用一个或多个方法，这些方法可以被重写以处理特殊的字符键和物理按键。

keydown 触发后不一定触发 keyup 当 keydown按下后拖动鼠标，那么将不会触发 keyup事件

4 用法区别：
- 系统由 keydown 返回键盘的代码后再由 translateMessage 函数翻译成字符，然后在由 keypress 返回键盘的字符值（Ascall 字符）。
  
  所以，在使用时应根据你的目的，选择性的使用：
  
  如果你只想读取字符用 keypress;如果想读取各键盘的状态用 keydown
  - keydown: 用户再键盘上按下某按键时触发，一直按着某按键则会不断触发(opera浏览器除外)；
  - keypress:用户按下一个按键，并产生一个字符时触发（也就是不管类似 shift、alt、ctrl之类的键只要用户按了一个能在屏幕上输出字符的按键 keypress 事件才会触发）一直按着某键则会不断触发
  - keypress主要用来捕获数字(注意：包括 shift+数字符号)、字母(注意：包括大小写)、小键盘除了F1-12、shift、Alt、Ctrl、insert、home、pgup、delete、end、pgdn、scrolllock、pause、numlock、菜单键、开始键、和方向键外的ANSI字符
  - keydown和keyup通常可以捕获除了 prscrn 所有键(这里不讨论特殊键盘的特殊键)
  - keydown和keyup对于单个字符捕获的 keyvalue 都是一个值，也就是不能判断单个字符的大小写
  - keypress 不区分小键盘和主键盘的数字字符
  - keydown 和 keyup 区分小键盘和主键盘的数字字符
  - 其中 prscrn按键和 keypress 、keydown 和 keyup 都不能捕获
5.系统组合键的判定

在使用键盘的时候通常会用到 Ctrl+shift+alt 类似的组合键功能，通过 keyup 事件能够处理(说明一下这里不用keydown事件：因为在判定keydown 的时候，ctrl、shift、和Alt属于一直按下状态然后再加另外一个键是不能准确捕获组合键，所以使用keydown 是不能准确判断的，要通过keyup事件来判定)
6.捕获PreScrn按键事件

通过一种钩子的方式可以判定PrScrn 按键事件，钩子可以获取任何键盘事件

WinSolstice

关注

14
点赞
踩
37

收藏

觉得还不错? 一键收藏
4
评论
键盘事件keypress 和 keydown、keyup 的用法与区别

KeyDown：用户摁下摁键时发生KeyPress：用户摁下摁键，并且产生一个字符时发生KeyUp：用户释放某一个摁键时触发定义和用法完整的 keypress 过程分为两个部分：1. 按键被按下；2. 按键被松开。当按钮被按下时，发生 keydown 事件。 keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。 <htm
复制链接

扫一扫