onKeyPress Vs. onKeyUp和onKeyDown

Question

这三个事件有什么区别？谷歌上搜索我发现了

该的KeyDown当用户按下一个键触发事件.

该KEYUP当用户释放的关键是触发事件.

该按键响应事件被触发时,用户按下&释放的关键.(onKeyDown后跟onKeyUp)

我理解前两个,但KeyPress与KeyUp不一样吗？(或者可以在没有按下(KeyDown)的情况下释放密钥(KeyUp)吗？)

这有点令人困惑,有人可以为我清除这个吗？

Answer 1

点击此处查看此答案中最初使用的归档链接.

从该链接:

理论上,keydown和keyup事件表示按下或释放的键,而keypress事件表示键入的字符.在所有浏览器中,该理论的实现并不相同.

Answer 2

KeyPress,KeyUp并且KeyDown类似于分别为:Click,MouseUp,和MouseDown.

1. Down 首先发生
2. Press 发生在第二位(输入文字时)
3. Up 最后发生(文本输入完成时).

例外是webkit,其中有一个额外的事件:

keydown
keypress
textInput     
keyup

编辑 Vsync几个月前添加了一个演示片段,但刚才我已删除它,因为它不再有效,给出以下错误:"未捕获DOMException:无法从'Window'读取'localStorage'属性:文档是沙箱并没有"允许同源"标志." 您可以在测试页面中试用它,但是:

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

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

Answer 3

这里的大多数答案都更多地关注理论而不是实际问题,keyup并且keypress它与输入字段值之间存在一些重大差异,至少在Firefox中是如此(在43中测试过).

如果用户键入1一个空的input元素:

1. input元素的值将是keypress处理程序内的空字符串(旧值)

2. input元素的值将是处理程序1内的(新值)keyup.

如果您正在做一些依赖于在输入之后知道新值而不是当前值(如内联验证或自动选项卡)的内容,这一点非常重要.

场景:

1. 用户键入12345输入元素.
2. 用户选择文本12345.
3. 用户键入字母A.

当keypress输入字母后事件触发时A,文本框现在只包含字母A.

但:

1. Field.val()是12345.
2. $ Field.val().长度是 5
3. 用户选择是一个空字符串(阻止您通过覆盖选择来确定删除的内容).

因此,似乎浏览器(Firefox 43)会擦除用户的选择,然后触发keypress事件,然后更新字段内容,然后触发keyup.

Answer 4

onkeydown键关闭时触发(如快捷键;例如,in Ctrl+A,Ctrl保持'down'.

onkeyup 释放键时触发(包括修饰符/ etc键)

onkeypress被烧制的组合onkeydown和onkeyup,或根据键盘重复(当onkeyup不触发).(这种重复行为是我没有测试的.如果你做测试,添加评论!)

textInput输入一些文本时会触发(仅限webkit)(例如,Shift+A输入大写的'A',但Ctrl+A会选择文本而不输入任何文本输入.在这种情况下,会触发所有其他事件)

Answer 5

似乎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,而不是按下按键时触发事件.

不同之处在于事件不是一次触发而是多次触发(只要按住按键).请注意并相应地处理它们.

Answer 6

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

• KeyDown – 按下按键时
• KeyUp – 释放按钮时以及更新输入/文本区域的值之后（其中只有一个）
• KeyPress –在这两者之间，实际上并不表示按键已被按下和释放（请参见下文）。

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

• 按键响应忽略delete，箭头，PgUp/ PgDn，home/ end，ctrl，alt，shift等等而KeyDown和KEYUP不（见关于细节esc下文）;
• 当您在Windows中通过alt+ 切换窗口时tab，只有KeyDown alt会触发，因为窗口切换发生在任何其他事件之前（而tab我认为，至少在Chrome 71中，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事件）

Answer 7

此文章由Jan沃尔特是我碰上了最好的一块，你可以找到归档副本这里如果链接已经死了。

它很好地解释了所有浏览器按键事件，

该KEYDOWN事件发生时，按下该键，紧接着的按键事件。然后，释放键时会生成keyup事件。

要理解的区别KEYDOWN和按键，这是区分有用字符和键。一个关键是计算机的键盘上的物理按键。甲字符是通过按压按钮类型的符号。在美国键盘上，4在按住键的同时按下Shift键通常会产生一个“美元符号”字符。世界上的每个键盘不一定都是这种情况。从理论上讲，keydown和keyup事件表示按下或释放的键，而keypress事件表示正在键入的字符。实际上，这并不总是实现方式。

有一段时间，一些浏览器在按键之后立即触发了另一个事件，称为textInput。DOM 3标准的早期版本打算以此来代替按键事件，但是整个概念后来被撤销了。Webkit在525和533版本之间支持此功能，但有人告诉我IE支持它，但我从未检测到，可能是因为Webkit要求将其称为textInput，而IE称为textinput。

还有一个名为input的事件，受所有浏览器支持，该事件在对textarea或input字段进行更改后立即触发。通常，按键将触发，然后键入的字符将出现在文本区域中，然后输入将触发。该输入事件实际上并不给什么键被输入的任何信息-你不得不检查文本框弄明白发生了什么变化-所以我们真的不认为这是一个关键事件，并不能真正在这里记录它。尽管它最初仅是为文本区域和输入框定义的，但我相信在将其推广到其他类型的对象上也有一些发展。

Answer 8

onkeypress事件适用于除所有浏览器中的ALT,CTRL,SHIFT,ESC之外的所有键,其中onkeydown事件适用于所有键.意味着onkeydown事件捕获所有键.

Answer 9

更新答案：

按键按下

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

按键

• 按住键时多次触发。
• 难道不火元密钥。

键升

• 当您释放键时，最后触发一次。
• 触发元键。

这是双方的行为addEventListener和jQuery。

https://jsbin.com/vebaholamu/1/edit?js,console,output <-- 尝试示例

（答案已用正确的回复、屏幕截图和示例进行编辑）