onKeyPress与。 onKeyUp和onKeyDown

#1 楼

在此处查看此答案中最初使用的存档链接。

从该链接开始：


从理论上讲，onKeyDown和onKeyUp事件表示正在按下或释放的键。 ，而onKeyPress事件表示正在键入的字符。该理论的实现并非在所有浏览器中都相同。

#2 楼

KeyPress，KeyUp和KeyDown分别类似于：Click，MouseUp,和MouseDown。


Down首先出现

Press第二出现（输入文本时）

Up最后一次发生（当文本输入完成时）。

webkit例外，其中有一个额外的事件：

keydown
keypress
textInput     
keyup

下面是当事件触发时，您可以用来查看自己的摘要：

 window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
} 

#3 楼

这里的大多数答案更多地侧重于理论而不是实际问题，并且keyup和keypress之间存在一些很大的差异，因为它涉及输入字段值，至少在Firefox中（在43中进行了测试）。

如果用户在空的输入元素中输入1：


输入元素的值将是keypress处理程序中的空字符串（旧值）
输入元素的值在1处理程序中将是keyup（新值）。

如果您要做的事情依赖于输入后知道新值而不是当前值（例如内联验证或自动制表符。

场景：


用户将12345键入输入元素。
用户选择文本12345。
用户键入字母A。

当输入字母keypress后触发A事件时，文本框现在仅包含字母A。

但是：


Field.val（）是12345。
$ Field.val（）。length是5

用户选择是一个空字符串（防止您通过覆盖选择来确定删除了什么内容）。

因此浏览器（Firefox 43）似乎会删除用户的选择，然后触发keypress事件，然后更新字段内容，然后触发keyup。

#4 楼

按下键时会触发onkeydown（例如快捷方式；例如，在Ctrl+A中，将Ctrl保持为“按下”状态。

释放键时会触发onkeyup（包括修饰键/等键）

onkeypress是作为onkeydown和onkeyup的组合触发的，或者取决于键盘重复次数（当未触发onkeyup时）（这种重复行为是我尚未测试过的。如果您要进行测试，添加评论！）

输入某些文本时会触发textInput（仅适用于webkit）（例如，Shift+A将输入大写字母“ A”，但是Ctrl+A将选择文本而不输入任何文本输入。）这种情况下，所有其他事件都将被触发）

#5 楼

首先，它们具有不同的含义：它们会触发：


KeyDown –按下键时

KeyUp –释放按钮时，以及Input / textarea的值被更新（其中只有一个）
KeyPress –在这两者之间，并不表示实际上已按下并释放了一个键（请参见下文）。

第二，一些键会触发其中一些事件，而不会触发其他事件。例如，


KeyPress会忽略删除，箭头，PgUp / PgDn，home / end，ctrl，alt，shift等，而KeyDown和KeyUp则不会（请参见下面有关esc的详细信息）；
当您在Windows中通过alt + tab切换窗口时，只有alt才会触发altdown，因为窗口切换发生在任何其他事件之前（我想，至少在Chrome 71中，系统阻止了tab的keydown）。 />
此外，您还应该记住，event.keyCode（和event.which）的KeyDown和KeyUp值通常相同，而KeyPress的值不同。尝试我创建的游乐场。顺便说一句，我注意到了一个奇怪的问题：在Chrome中，当我按ctrl + a且input / textarea为空时，KeyPress会以event.keyCode（和event.which）等于1的方式触发！ （当输入不为空时，它根本不会触发）。

最后，有一些实用程序：


要处理箭头，您将可能需要使用onKeyDown：如果用户按住↓，则KeyDown将触发多次（而当他们释放按钮时，KeyUp仅触发一次）。另外，在某些情况下，您可以轻松地阻止KeyDown的传播，但不能（或不能那么容易）阻止KeyUp的传播（例如，如果要在Enter上提交而不在文本字段中添加换行符）。
令人惊讶的是，当您按住某个键（例如在textarea中）时，KeyPress和KeyDown都会多次触发（Chrome 71），如果我需要多次触发的事件和一次按键释放的KeyUp，我会使用KeyDown。 >当您必须对游戏的动作提供更好的响应时，KeyDown通常更适合游戏。

esc通常是通过KeyDown处理的：KeyPress不会触发，并且KeyUp在不同浏览器中对input和textarea的行为有所不同（主要是由于失去焦点）
如果您想将文本区域的高度调整为内容，您可能不会使用onKeyDown，而是使用onKeyPress（PS，在这种情况下，实际上最好使用onChange）。

我已经在项目中使用了全部3个，但不幸的是，可能已经忘记了一些语用学。 （需要注意：还有input和change事件）

#6 楼

Jan Wolter的这篇文章是我遇到的最好的文章，如果链接失效，您可以在这里找到存档的副本。
它很好地解释了所有浏览器的按键事件，

keydown事件按下键时发生，紧随其后的是按键事件。松开键时会生成keyup事件。
要了解keydown和keypress之间的区别，区分字符和键很有用。按键是计算机键盘上的物理按钮。字符是通过按按钮键入的符号。在美国键盘上，按住Shift键的同时按4键通常会产生一个“美元符号”字符。世界上的每个键盘不一定都是这种情况。从理论上讲，keydown和keyup事件表示正在按下或释放的键，而keypress事件则表示正在键入的字符。实际上，这并不总是实现方式。
有一段时间，一些浏览器在按键后立即触发了另一个事件，称为textInput。 DOM 3标准的早期版本打算以此代替keypress事件，但是整个概念后来被撤销。 Webkit在525和533版本之间支持此功能，但有人告诉我IE支持它，但我从未检测到，可能是因为Webkit要求将其称为textInput，而IE却将其称为textinput。
还有一个称为输入的事件，受所有浏览器支持，该事件在对文本区域或输入字段进行更改后立即触发。通常，按键将触发，然后键入的字符将出现在文本区域中，然后输入将触发。输入事件实际上并没有提供有关键入键的任何信息-您必须检查文本框以了解更改的内容-因此我们并不真正将其视为键事件，也没有在此处进行实际记录。尽管它最初仅是为文本区域和输入框定义的，但我相信在将其推广到其他类型的对象上也有一些发展。

#7 楼

似乎onkeypress和onkeydown的作用相同（只是上面已经提到的快捷键的微小区别）。

您可以尝试以下操作：

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

您会看到onkeypress和onkeydown事件都是在按下键时触发的，而不是在按下键时触发的。

不同的是，该事件触发的次数不是一次，而是多次触发（只要您按住该键）。请注意并相应地处理它们。

#8 楼

在所有浏览器中，除了ALT，CTRL，SHIFT，ESC之外，onkeypress事件适用于所有键，而onkeydown事件适用于所有键。意味着onkeydown事件会捕获所有键。

#9 楼

更新的答案：

KeyDown


按住键时多次触发。
触发元键。

KeyPress


按住键时多次触发。
不触发元键。

KeyUp


释放密钥时最后触发一次。
触发元密钥。

这是addEventListener和jQuery的行为。

https：// jsbin.com/vebaholamu/1/edit?js，控制台，输出<-尝试示例



（答案已正确编辑，带有截图和示例）

#10 楼

只是想分享一个好奇心：

，当使用onkeydown事件激活JS方法时，该事件的代码与您通过onkeypress获得的代码不同！

例如，在使用onkeypress时，小键盘键将返回与字母键上方的数字键相同的字符，但在使用onkeydown时将返回字符！

花了我几秒钟的时间弄清楚为什么我的脚本在使用onkeydown时检查某些字符的脚本失败了！

演示：https://www.w3schools.com/ code / tryit.asp？filename = FMMBXKZLP1MK

，是的。我确实知道方法的定义是不同的..但是令人非常困惑的是，在这两种方法中，事件的结果都是使用event.keyCode ..检索的，但是它们没有返回相同的值。声明式实现。

#11 楼

基本上，这些事件在不同的浏览器类型和版本上的行为有所不同，我创建了一个jsBin测试，您可以检查控制台以了解这些事件在目标环境中的行为，希望有帮助。 http://jsbin.com/zipivadu/10/edit

#12 楼

一些实际的事实可能对决定处理哪个事件有用（运行下面的脚本并专注于输入框）：

 $('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key)) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/> 

按下：




非插入/键入键（例如Shift，Ctrl）不会触发keypress。按下Ctrl并释放它：


keydown 17 17 Control

keyup 17 17 Control



将字符转换应用到其他字符的键盘上的键可能会导致在keydown上出现死键和重复的“键”（例如〜，´）。按下并释放它以显示双´´：


按下192 192死键

按下192 192´´

keypress 180 180´

keypress 180 180´

keyup 192 192 Dead




此外，非键入输入（例如，范围<input type="range">）仍会根据所按下的按键触发所有按键，按键按下和按键事件。