KeyPress 和KeyDown 、KeUp之间的区别
前几天，在写完一个功能模块上线测试的时候，出现了一个诡异的问题。input 框在输入查询内容之后，按回车键居然有两种不同的表现形式（input 框没有绑定键盘事件），谷歌和火狐功能正常，但IE在按了回车键以后居然自动调用方法。
页面结构：标签上没绑定任何键盘事件，控制器内也没有给元素绑定键盘事件。
<div class="search-input-tel search-input-visit-tel" >
<input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="请输入查询信息!"/>
</div>
表现形式：
，谷歌和火狐很正常，什么事都没发生
，IE上却自动调用了一个方法，而且始终调用的同一个方法。
搞得有点蒙圈，不晓得是咋回事。既然 input框 要调用键盘事件，那就调用吧，大不了我在标签上面绑定定义好的键盘事件方法：
<div class="search-input-tel search-input-visit-tel" >
<input class="searchinput-tel searchinput-visit-tel" type="text" ng-model="private.keyWords" maxlength="20" placeholder="请输入查询信息!"
ng-keypress="enterQuery($event,'query',1)" ng-change="changesData(private.keyWords)"/>
</div>
键盘回车事件方法：
//回车键功能
$scope.enterQuery = function (event,type,repetitionType) {
var key = window.event ? window.event.keyCode : event.which; //获取键盘码；window.event.keyCode 获取IE下的键盘码，event.which获取非IE下的键盘码
if (key === 13) { //回车键键盘码为13
try {
if (window.event) { //ie
$scope.clientsHeavy(type,repetitionType);
window.event.returnValue = false;
} else { //非IE
$scope.clientsHeavy(type,repetitionType);
return false;
}
}
catch (ex) {
}
}
};
这下解决了 input框 回车自动调用方法的问题。
现在返回来看他们之间的区别，在此我用了 keypress 事件，而没有用 keyup 事件，因为keyup事件在IE上和谷歌上表现形式又不一样。同样是执行 console.log("键盘码:key="+ key);
谷歌浏览器：keypress 事件和 keydown 事件，以及 keyup 事件，三者执行结果一样，控制台都会打印： 键盘码:key=13
IE浏览器：keypress 事件和 keydown事件，控制台也都会打印：键盘码:key=13 ；但是到了 keyup事件，控制台则不打印：键盘码:key=13，这表示keyup事件并没有执行我们自定义的方法，反而又出现了自动调用方法的情况。所以自己在这总结下，他们仨之间的区别，加深印象。
/****下面抄一段对键盘事件和键盘码 (ASCII码)，以及KeyPress 和KeyDown 、KeUp事件的描述****/
Windows窗体通过引发键盘事件来处理键盘输入以响应Windows消息，大多数Windows窗体应用程序都通过处理键盘事件来以独占方式处理键盘输入。
1．按键的类型
Windows窗体将键盘输入标识为 由按位Keys枚举 表示的虚拟键代码。使用Keys枚举，可以综合一系列按键以生成单个值，这些值与WM_KEYDOWN和WM_SYSKEYDOWNWindows消息所伴随的值相对应。另外，程序开发人员可通过处理KeyDown或KeyUp 事件来检测大多数物理按键操作。字符键是Keys枚举的子集，它们与WM_CHAR和WM_SYSCHAR Windows消息所伴随的值相对应，如果通过组合按键得到一个字符，则可以通过处理KeyPress事件来检测该字符。
事件定义：
- KeyDown：在控件有焦点的情况下按下键时发生。
- KeyPress：在控件有焦点的情况下按下键时发生。(下面会说和KeyDown 的区别)
- KeyUp：在控件有焦点的情况下释放键时发生。
2．键盘事件的顺序
一个控件上可能出现3个与键盘相关的事件，下面是这些事件发生的常规顺序：
- 用户按“a”键，该键将被预处理和调度，同时会触发KeyDown事件。
- 用户按住“a”键，该键将被预处理和调度，同时会触发KeyPress事件。
- 用户松开“a”键，该键将被预处理和调度，同时会触发KeyUp事件。
但是KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，则不会触发KeyUp事件。
3．键的预处理
像其他消息一样，键盘消息是在窗体或控件的WndProc方法中处理的。窗体或控件在处理键盘消息之前，PreProcessMessage方法会调用一个或多个方法，这些方法可被重写以处理特殊的字符键和物理按键。
4. 系统组合键的判定
在使用键盘的时候，通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此，如何进行判定？
通过KeyUp 事件能够来处理（这里说明一下为什么不用KeyDown，因为在判定KeyDown的时候，CTRL、SHIFT和ALT 属于一直按下状态，然后再加另外一个键是不能准确捕获组合键，所以使用 KeyDown 是不能准确判断出的，要通过KeyUp 事件来判定）。
5. 捕获PrScrn按键事件
通过一种钩子的方式可以判定PrScrn 按键事件，钩子可以获取任何键盘事件。
6．KeyPress 和KeyDown 、KeyUp之间的区别
- KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
- KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
- KeyPress 只能捕获单个字符
- KeyDown 和KeyUp 可以捕获组合键。
- KeyPress 可以捕获单个字符的大小写
- KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
- KeyPress 不区分小键盘和主键盘的数字字符。
- KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
- 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
/*********************************************************************************************************************************************************************************************************************************************************************************/
抄抄了那么多，感觉有点过于理论化，其实我们在按下一个键时，KeyDown和KeyPress两个都要发生(一个在前，一个在后)，虽然两个看上去没什么区别，但是两者还是有本质的区别。而 keyup 则是我们将按键抬起时触发的，属于整个按键过程的最后阶段，所以有其特定的用处，最典型的就是左右数据预览，以及获取最后一个点击字符。
下面是测试代码和注释：(结果就只能自己打开去看了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keydown、keypress、keyup的区别</title>
<style>
.area{
float: left;
display: inline;
width: 50%
}
</style>
</head>
<body>
<div>
<!--keydown、keypress、keyup触发的先后顺序-->
<span>随意输入一些字符:</span> <input class="keydown-keyup" style="background-color:#00FFFF" type="text"/>
<p>当 keydown、keypress 和 keyup 事件相继触发时，输入区域会改变颜色。从而可以看出三个事件触发的先后顺序</p>
<p>在 keypress 一直按着不放开，keyup事件不会触发，但该按键状态码会一直被获取，文本框数据会一直添加</p>
</div> <div style="margin-top: 100px">
<div style="width: 100%">
<textarea id="t1" class="area"></textarea>
<div id="v1" class="area"></div>
</div>
<!--按键按下触发keydown事件，t1显示当前按键字符，v1始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加，同样v1的数据也会一直往后添加--> <div style="width: 100%">
<textarea id="t2" class="area"></textarea>
<div id="v2" class="area"></div>
</div>
<!--按键按下触发keypress事件，t2显示当前按键字符，v2始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加，同样v2的数据也会一直往后添加--> <div style="width: 100%">
<textarea id="t3" class="area"></textarea>
<div id="v3" class="area"></div>
</div>
<!--按键按下触发keyup事件，t2显示当前按键字符，按键不放开则当前字符会一直往后添加，但v2并不能获取到新输入的字符数据-->
<div style="clear: both"></div> <!--这里分别给三个textarea标签绑定三种事件，其中t1，t2均不能实时将数据同步到v1，v2中(总是缺少当前正在输入的字符)，keydown、keypress因为是按下按键就触发，所以按下按键时当前输入字符并未返回，因而不能实时同步。
而keyup则不一样，keyup必须等到按键松开才能触发，才能将数据同步，当然如果我一直按着按键(一直处于keydown、keypress阶段)，虽然textarea数据一直在往后添加，但是下面div的数据却无法同步，必须要按键松开才能同步。
这样就说明了这三种事件触发之间的区别，keydown是在按下时触发，虽然返回键盘的代码，但还没得到最后的输入结果；keypress也是一样，虽然得到了ASCII字符，但还没得到需要的字符；keyup才能得到最后的完整数据。
因而keyup适用于文本框的数据输入和同步，keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。所以可以根据不同的需求，适当的选择!--> </div> <div style="margin-top: 100px">
<!--在看了三者之间的细小差别后，再来看下keydown、keypress之间的区别-->
<div>
<span>随意输入一些字符:</span><input class="keydown" type="text"/>
<p>这里显示keydown事件返回的数据:</p><span id="keydown"></span>
</div>
<div>
<span>随意输入一些字符:</span><input class="keypress" type="text"/>
<p>这里显示keypress事件返回的数据:</p><span id="keypress"></span>
</div>
</div> <script type="text/javascript" src="./framework/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".keydown-keyup").keydown(function () {
console.log("keydown正在执行!");
$(".keydown-keyup").css("background-color", "#FF0000");
});
$(".keydown-keyup").keypress(function () {
console.log("keypress正在执行!");
$(".keydown-keyup").css("background-color", "#FFA500");
});
$(".keydown-keyup").keyup(function () {
console.log("keyup正在执行!");
$(".keydown-keyup").css("background-color", "#4B0082");
}); $('#t1').on('keydown', function () {
$('#v1').text($(this).val());
});
$('#t2').on('keypress', function () {
$('#v2').text($(this).val());
});
$('#t3').on('keyup', function () {
$('#v3').text($(this).val());
}); $(".keydown").keydown(function (event) {
console.log(event);
var key = window.event ? window.event.keyCode : event.which;
if (window.event) { //ie
$("#keydown").html("Key: " + key);
window.event.returnValue = false;
} else { //非IE
$("#keydown").html("Key: " + key);
return false;
}
});
$(".keypress").keypress(function (event) {
console.log(event);
var key = window.event ? window.event.keyCode : event.which;
if (window.event) { //ie
$("#keypress").html("Key: " + key);
window.event.returnValue = false;
} else { //非IE
$("#keypress").html("Key: " + key);
return false;
}
});
/**通过对event事件对象的对比，发现keydown和keypress两个事件返回的事件对象基本相同，但有一个很细微的却很重要的区别：charCode值不一样
* keydown 事件对象的charCode值始终为：0
* keypress 事件对象的charCode值却跟keyCode值一样(当前按键字符的ASCII字符)。
* 所以：charCode 返回的是 onkeypress 事件触发键值的字符代码(ASCII字符代码，就是ASCII码，一一对应)。而 keyCode 返回的是 onkeydown onkeypress 以及 onkeyup 事件的键的代码(还是ASCII码)。
* 整个系统都是采用ASCII码表(ASCII字符和ASCII码一一对应，比如键盘"p"键，对应ASCII字符码:"p"，对应ASCII码:112)
*/
});
</script>
</body>
</html>
兜了一个大圈，终于对这三者之间的区别有了一定的了解。
总结：keyup适用于文本框的数据输入和同步，以及数据的获取；keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。
KeyPress 和KeyDown 、KeUp之间的区别的更多相关文章
- C# 如何捕获键盘按钮和组合键以及KeyPress/KeyDown事件之间的区别 （附KeyChar/KeyCode值）
1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加: 2. 添加KeyPress / KeyDown事件: 1.KeyPress 和KeyDown .Ke ...
- keydown,keypress,keyup三者之间的区别
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
- keypress 、keydown、keyup后触发回车
1.keypress .keydown.keyup的区别 keypress表示键盘按下的全过程,只有按下任意字母数字键(后退.删除等系统功能键无效)时才触发,捕获到的keyCode区分大小写 keyd ...
- KeyPress 和KeyDown 、KeyPress之间的区别
虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回 ...
- C# 中 KeyPress 、KeyDown 和KeyPress的详细区别[转]
研究了一下KeyDown,KeyPress 和KeyUp ,发现之间还是有点学问的. 让我们带着如下问题来说明,如果你看到这些问题你都知道,那么这篇文章你就当复习吧:) 1.这三个事件的顺序是怎么样的 ...
- 转载关于KeyPress和KeyDown事件的区别和联系
KeyDown:在控件有焦点的情况下按下键时发生. KeyPress:在控件有焦点的情况下按下键时发生. KeyUp:在控件有焦点的情况下释放键时发生. 1.KeyPress主要用来接收字母.数字等A ...
- KeyPress和KeyDown/KeyUp
(1) KeyPress 和KeyDown .KeyUp之间的区别: 1).KeyPress主要用来捕获数字(注意:包括Shift+数字的符号).字母(注意:包括大小写).小键盘等除了F1-12 ...
- keypress和keydown事件及keyCode和keyChar
二:keypress和keydown事件: 现只在IE10.chrome(版本 32.0.1700.107 m).firefox(25.0.1)中测试了. IE8 chrome firefox $ ...
- select、poll、epoll之间的区别总结
select.poll.epoll之间的区别总结 05/05. 2014 select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪 ...
随机推荐
- awk将某个字段按照分隔符分割之后统计次数
cat label_movie2|grep BBD252CC0A4FE7D10C990261D5CEACB5|awk -F "," '{for(i=2;i<NF;i++) p ...
- css定位“十字架“之水平垂直居中
1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...
- ecshop 安装出错gd_version
678: static function gd_version()
- Ceph 块设备 - 块设备快速入门
目录 一.准备工作 二.安装 Ceph 三.使用块存储 一.准备工作 本文描述如何安装 ceph 客户端,使用 Ceph 块设备 创建文件系统并挂载使用. 必须先完成 ceph 存储集群的搭建,并 ...
- Entity Framework 6.x 学习之 - 创建带连接表的实体模型 with Database First
一.Modeling a Many-to-Many Relationship with No Payload 1. 创建数据库表 CREATE TABLE [Album] ( , ), ) COLLA ...
- DDA, Bresenham line's algorithm and Voxel Traversal used in the Grid-Accelerator in PBRT
- DDA(Digital Differential Analyzer, 数值微分法) - 计算机图形学中,经常会遇到一些计算机中”经典“的问题.例如,如何利用计算机”离散“的特质,模拟 ...
- SpringBoot入门 (八) Cache使用
本文记录学习在SpringBoot中使用Cache. 一 为什么要使用缓存 缓存是一个数据交换的缓冲区,在一些条件下可以替代数据库.举个例子:我们有一个查询的业务,访问数据的频率特别高,且每次访问时的 ...
- SQL Server 2008 安装重启电脑失败
a .重启机器,再进行安装,如果发现还有该错误,请按下面步骤b.在开始->运行中输入regeditc.到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\C ...
- Python3 中使用sys.argv详解
#/usr/bin/env python #coding:utf-8 import sys # print(sys.argv[1]) def readFile(filename): "&qu ...
- JSP 基础(二)
五 注释 5.1 JSP注释 <%--注释内容--%> 5.2 HTML注释 <!--注释内容--> 5.3 Java注释 六 JSP指令 在JSP中有三种类型 ...