Javascript keyup/on-keyup错误的元素

Javascript keyup / onkeyup wrong element

本文关键字：元素 错误 on-keyup keyup Javascript      更新时间：2023-09-26

有人有同样的问题吗？当在文本框中快速键入并跳到下一个文本框时（通过按下"tab"键），keyup事件从错误的元素注册。

行为：

  1. 前提条件：我们有两个文本框；将javascript注册到key-up事件
  2. 操作：在文本框中快速键入，然后用"tab"键切换到下一个文本框
  3. 结束情况：所有按下的字符都显示在第一个文本框中，第二个文本框被选中（但为空）；Javascript keyup事件注册最后一个元素的最后一个x（取决于类型速度）。（出乎意料）

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

（这个问题在纯javascript中，但也会传播到jQuery onkeyup事件）

在浏览器中测试：-Chrome（版本49.0.2623.87 m（64位））-火狐（45.0.1）-边缘

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">

输出：参见控制台；

实际上，您在控制台中看到的是预期的结果，因为：当你按下tab键时，它的句柄2个事件第一个是keyDown（这将把你移动到第二个textField），现在你在第二个text Field，你仍然在keyDown事件下，所以当你释放tab键时它的句柄是你的keyUp事件，最后一个事件发生在第二个子text Field上。

相关文章：