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

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 按键事件，钩子可以获取任何键盘事件

键盘事件keypress 和 keydown、keyup 的用法与区别相关推荐

WinForm下的键盘事件(KeyPress、KeyDown)及如何处理不响应键盘事件
KeyDown事件用来处理功能键:F1 F2 F3... keyPress事件用来处理字符比如说:A B C... 1 2 3... 注:处理该事件时,需要先将窗体的 KeyPreview=tru ...
java keypress_jquery 键盘事件 keypress() keydown() keyup()用法总结
事件的定义完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当按钮被按下时,发生 keydown 事件. keydown()方法触发 keydown 事件,或规定当 ...
jQuery 绑定3种键盘事件 keypress(键盘键按下，功能键和中文不触发)，keydown(键盘键按下，所有键都触发)，keyup(键盘键松开)
1 keypress() 说明:当键盘键被按下时触发 keypress 事件,按特定的功能键和输入中文时不能触发. 语法: $(selector).keypress(function1); 实例: 文 ...
JavaScript的键盘事件
键盘事件 keypress 当键盘键按下的过程首先,按键被按下,然后, 按键被松开 keydown 当键盘键按下时,触发 Keyup 当键盘键松开时,触发触发顺序 1.keypress键按下的过程 ...
[前端] 键盘事件常用操作
网页中有些操作是需要键盘事件的,如点击 enter 键实现登录等. 操作对象:document文档对象 window窗体对象 html标签元素 body标签元素都可以事件方法: key ...
JavaScript中常见键盘事件以及BOM中window常用对象
一,键盘事件 keypress键盘按下触发,但是不能识别crtl,shift方向键 keydown键盘按下触发,所有按键都支持,区别于keypress keyup键盘弹起触发代码展示: docume ...
Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
java keydown_键盘事件keydown、keypress、keyup随笔整理总结
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入 ...
python绑定按键pageup键_键盘事件keydown、keypress、keyup随笔整理总结（摘抄）
原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...

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

键盘事件keypress 和 keydown、keyup 的用法与区别相关推荐

最新文章

热门文章