IE 上的按键事件序列答案

【问题标题】：Keypress event sequence on IEIE 上的按键事件序列
【发布时间】：2015-08-06 16:30:34
【问题描述】：

我刚刚注意到 keypress 事件的顺序在 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();
        });

我应该如何解决这个问题？屏幕上出现按键后如何指示切换焦点？

【问题讨论】：

标签： javascript events sequence keypress explorer

【解决方案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);
});

&lt;input id="one" type="text"/&gt;&lt;input id="two" type="text"/&gt;

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

【讨论】：

【解决方案2】：

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

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

【讨论】：