今天小编跟大家讲解下有关KeyPress 和KeyDown 、KeUp之间的区别 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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事件并没有执行我们自定义的方法 反而又出现了自动调用方法的情况。所以自己在这总结下 他们仨之间的区别 加深印象。
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 type="text"/> <p>当 keydown、keypress 和 keyup 事件相继触发时 输入区域会改变颜色。从而可以看出三个事件触发的先后顺序</p> <p>在 keypress 一直按着不放开 keyup事件不会触发 但该按键状态码会一直被获取 文本框数据会一直添加</p></div><div> <div> <textarea id="t1"></textarea> <div id="v1"></div> </div> <!--按键按下触发keydown事件 t1显示当前按键字符 v1始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加 同样v1的数据也会一直往后添加--> <div> <textarea id="t2"></textarea> <div id="v2"></div> </div> <!--按键按下触发keypress事件 t2显示当前按键字符 v2始终能获取到新输入的字符数据。按键不放开当前字符会一直往后添加 同样v2的数据也会一直往后添加--> <div> <textarea id="t3"></textarea> <div id="v3"></div> </div> <!--按键按下触发keyup事件 t2显示当前按键字符 按键不放开则当前字符会一直往后添加 但v2并不能获取到新输入的字符数据--> <div></div> <!--这里分别给三个textarea标签绑定三种事件 其中t1 t2均不能实时将数据同步到v1 v2中(总是缺少当前正在输入的字符) keydown、keypress因为是按下按键就触发 所以按下按键时当前输入字符并未返回 因而不能实时同步。 而keyup则不一样 keyup必须等到按键松开才能触发 才能将数据同步 当然如果我一直按着按键(一直处于keydown、keypress阶段) 虽然textarea数据一直在往后添加 但是下面div的数据却无法同步 必须要按键松开才能同步。 这样就说明了这三种事件触发之间的区别 keydown是在按下时触发 虽然返回键盘的代码 但还没得到最后的输入结果；keypress也是一样 虽然得到了ASCII字符 但还没得到需要的字符；keyup才能得到最后的完整数据。 因而keyup适用于文本框的数据输入和同步 keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。所以可以根据不同的需求 适当的选择!--></div><div> <!--在看了三者之间的细小差别后 再来看下keydown、keypress之间的区别--> <div> <span>随意输入一些字符:</span><input type="text"/> <p>这里显示keydown事件返回的数据:</p><span id="keydown"></span> </div> <div> <span>随意输入一些字符:</span><input type="text"/> <p>这里显示keypress事件返回的数据:</p><span id="keypress"></span> </div></div><script type="text/Javascript"src="http://www.fly63.com/article/detial/1005/./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; } }); });</script></body></html>兜了一个大圈 终于对这三者之间的区别有了一定的了解。
总结：keyup适用于文本框的数据输入和同步 以及数据的获取；keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)。
来源：https://www.cnblogs.com/donghuang/archive/2018/08/13/9449912.html
来源：爱蒂网
