Question

接收焦点作为键盘的输入也会按下触发焦点更改的Tab键。

a: <input type='text'/><br/>
b: <input type='text' onkeyup='alert("wtf?")'/><br/>

http://jsfiddle.net/59SnP/

由于我的控件也使用了标签（不在示例中），我希望使用与焦点相关的键盘事件（但我想接收其他非焦点更改相关标签事件）即可。我试图研究当前行为背后的基本原理，但一无所获。问题：指定了当前行为的位置（焦点更改未消耗事件），以及强制使用它的跨浏览器解决方法是什么。 THX。

Answer 1

根据Nathan的见解，这是一个完全有效的例子：

// First part of Nathan's HACK (set a sentinel when a focus changing tab has happened)
var tabPressed = false;
// remove this listener to break the functionality
$(document).on("keydown", function (e) {
    if(e.keyCode == 9) {
        tabPressed = true;   
    } else {
        tabPressed = false;
    }
});

// The listener on the client input that would kill the keyup tab event upon focus change
$("#magic").on("keyup", function(e) {
    if (tabPressed && e.keyCode==9) {
        tabPressed = false; // reset the sentinel
        e.stopImmediatePropagation()
        e.preventDefault()
    }
})

这是第二部分，它是一个有意义的简单骨架。我们在输入中禁用了TAB，并像使用其他键控一样记录它：

$("#magic").on("keydown", function(e) {
    if (e.keyCode==9) {
        e.preventDefault()
        e.stopPropagation()
    }
})

$("#magic").on("keyup", function(e) {
    $(this).val($(this).val() + " " + e.keyCode)
    e.stopPropagation()
    e.preventDefault()
})

支持故事的HTML非常简单：

a: <input type='text'/><br/>
b: <input type='text'/><br/>
c: <input type='text' id='magic'/><br/>

如果你想玩它，here it is on jsfiddle

注意：这仍然不是完美的解决方案，哨兵只是在控制内部重置，所以如果一个tabpress移动焦点不会激活我们的输入，哨兵卡住了，第一个事件将被吞下..所以这里是一个错误行为的例子：

点击输入A
按TAB键（焦点移至输入B，tabPressed变为true）
点击输入C
按TAB（当哨兵为真时被吃掉）
按TAB（现在通过）

为了让TAB自动发生，我必须按两次TAB，用户控制......

为什么Tab键按键导致焦点更改也会触发键盘事件？

1 个答案: