JavaScript键盘输入事件keyup/onkeyup作用于错误的元素

Question

有人遇到同样的问题吗？

在快速输入文本框并跳到下一个文本框（通过按“tab”键）时，keyup事件从错误元素注册。

行为：

1. 前提条件：我们有两个文本框；使用javascript注册了keyup事件
2. 操作：在文本框中快速输入并使用“tab”键切换到下一个文本框。
3. 结束状态：所有按下的字符都呈现在第一个文本框中，并选择第二个文本框（但为空）；Javascript keyup事件从最后一个元素注册了最后x个字符（取决于输入速度）。 （意外）

预期的结束状态：
- 所有按下的字符都呈现在第一个文本框中，并选择第二个文本框（但为空）； Javascript：只有最后一个（'tab' keyup事件）从最后一个元素注册。

（此问题适用于纯javascript，也适用于jQuery onkeyup事件）

在以下浏览器中测试： - Chrome（版本49.0.2623.87 m（64位）） - FireFox（45.0.1） - Edge

JSFiddle：https://jsfiddle.net/xk09542f/4/

js：

document.getElementById('inp1').onkeyup = function(e) {
     console.log(this.id + ' ' + e.which);
}
document.getElementById('inp2').onkeyup = function(e) {
  console.log(this.id + ' ' + e.which);
}

html:

<input id="inp1" type="text">
<input id="inp2" type="text">

输出：请查看控制台；

- Chris

---

你知道 keyup 是在你松开按键时触发的吗？所以如果你在按下 Tab 键后松开键盘，那么这就是预期的行为。 - Hacketo

试试这个 jsfiddle，调试起来会更容易 ;) https://jsfiddle.net/xk09542f/5/ - Baldráni

当同时打印按键按下事件时，情况变得更加奇怪；这也会将事件注册到错误的元素上。请参见 jsfiddle.net/xk09542f/6。 请参见图片：Image。 - Chris

Answer 1

实际上，您在控制台看到的是预期结果，因为： 当您按tab键时，它会处理2个事件，第一个是keyDown（这将使您移动到第二个textField），现在您在第二个textField中，仍处于keyDown事件下，因此当您释放tab键时，它会处理您的keyUp事件，并且此最后一个事件发生在第二个textField上。

- Ahmed