IE 上的按键事件序列

Question

我刚刚注意到按键事件的顺序在 Firefox 和 IE 上的执行方式不同：在 Firefox 上，如果您在聚焦输入上按键，则字符写在框中，然后附加到的函数该事件被触发。在 IE 上则相反。

所以这是我的问题，我有两个彼此相邻的输入文本，当我在第一个字符中写一个字符时，我希望第二个字符紧随其后获得焦点。这在 Firefox 上运行良好，但在 IE 上却不行，因为它甚至在字符写入第一个输入之前就切换到第二个输入...

这是我正在使用的代码的简化版（两个元素都是文本输入）：

        var one = document.getElementById('one');
        var two = document.getElementById('two');

        one.addEventListener('keypress', function(e) {
            e.target.nextElementSibling.focus();
        });

我该如何解决？按下的键出现在屏幕上后如何指示切换焦点？

Answer 1

我猜你可以这样使用 setTimeout：

var one = document.getElementById('one');
var two = document.getElementById('two');

one.addEventListener('keypress', function(e) {
    setTimeout((function(elem){
        return function(){
            elem.focus();
        };
    })(e.target.nextElementSibling),0);
});

<input id="one" type="text"/><input id="two" type="text"/>

setTimeout 将在下一个执行堆栈时触发函数，因此在元素被填充后。

Answer 2

焦点切换似乎发生在之前而不是之后。

使用 setTimeout 延迟焦点移动，因此 .focus 在输入字符后稍后调用。
将当前元素（文本所在的位置）拉出 e，并通过切换而不是立即切换焦点。由于您总是在切换之后，它应该适用于两种浏览器。

IE 上的按键事件序列

Keypress event sequence on IE

javascript

explorer

events

keypress

sequence