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

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

似乎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事件都是在按下键时触发的，而不是在按下键时触发的。

不同之处在于，事件不是一次触发，而是多次触发(只要您按住键)。要意识到这一点，并相应地处理它们。

“KeyPress”现已弃用。请使用KeyDown键。

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

先下 第二个按键发生(当输入文本时) Up发生在最后(当文本输入完成时)。

webkit是个例外，它有一个额外的事件:

keydown
keypress
textInput     
keyup

下面是一个片段，你可以自己看看什么时候事件被触发:

窗口。addEventListener(“弹起”,日志); 窗口。addEventListener(“键盘按键”,日志); 窗口。addEventListener(“keydown”、日志); 对数函数(事件){ console.log(事件。类型); ｝

这里的大多数答案更多地集中在理论而不是实际问题上，至少在Firefox中(在43中测试)，keyup和keypress在输入字段值方面有一些很大的区别。

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

input元素的值将是按键处理程序中的空字符串(旧值) 在keyup处理程序中，input元素的值将是1(新值)。

如果您所做的工作依赖于知道输入后的新值，而不是当前值，例如内联验证或自动制表符，那么这一点至关重要。

场景:

用户在输入元素中输入12345。 用户选择文本12345。 用户输入字母A。

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

But:

Field.val()是12345。 美元Field.val()。长度为5 用户选择是一个空字符串(防止您通过覆盖选择来确定删除了什么)。

这样看来，浏览器(Firefox 43)擦除用户的选择，然后触发按键事件，然后更新字段内容，然后触发keyup。

我观察到的keyup和keydown之间的区别是

如果我们为keydown事件附加一个事件处理程序，并记录输入框的值，即 (e.target.value)它返回keydown事件之前的值

但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值，包括被按下的键

让我们用例子来理解

// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered 
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
  console.log(e.target.value);
});


// but in case of keyup event the e.target.value prints 
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
  console.log(e.target.value);
});
<input type="text" id="searchCities" />

CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m