javascript - 执行操作后停止 Chrome 中的 Tab 键事件传播

Question

在 Chrome 中，我试图拦截 Tab 键按下，停止所有正常 Tab 键行为并执行我自己的操作。

如果我所做的就是这样，我可以停止默认行为。但是，如果执行某个操作，然后尝试停止默认行为，它会阻止焦点转移到下一个输入，但会在当前输入中放置一个制表符空间。

如果问题还不清楚，请查看this jsFiddle showing the issue

这是我尝试过的，(请注意，以下所有内容都可以在 Firefox 中完成我需要的操作，但不能在 Chrome 中完成)

<input type="text" class="next-tab"/>
<input type="text" class="next-tab2"/>
<input type="text" class="next-tab3"/>

$('.next-tab').keydown(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        console.log(code);
        if (code == 0 || code == 9){
            e.preventDefault();
            e.stopPropagation();
        }
    // this only blocks the propagation of the tab keypress event, and works as expected:
    });

$('.next-tab2').keydown(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        console.log(code);
        if (code == 0 || code == 9){
            alert("test");
            e.preventDefault();
            e.stopPropagation();

        }
});
$('.next-tab3').keydown(function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        console.log(code);
        if (code == 0 || code == 9){
            e.preventDefault();
            e.stopPropagation();
            alert("test");
            //putting the alert after doesnt help

        }
});

如何阻止将制表符空间添加到输入中？

Answer 1

仅当操作包含 alert()、confirm() 或 prompt() 时，才会出现此问题。这可能与它们重新进入事件循环的方式有关。因此，从代码中删除这些调试语句，它应该可以工作。