Javascript IE中的输入在Iframe内失去焦点

我有一个表格，用户可以在其中通过单元格进行制表。这是通过在单元格中插入一个输入标记来完成的（这也允许用户编辑信息）。当用户点击选项卡时，上一个单元格的输入标记将被删除，下一个单元格的输入标记将被插入并聚焦

除了IE9和IE10中的iframe之外，这在所有情况下都可以正常工作。由于某种原因，下一个单元格聚焦一秒钟，然后失去焦点。当输入标记模糊时，输入标记将从单元格中删除，因此从本质上看，选项卡似乎不起作用，用户无法编辑下一个单元格的内容。发生这种情况时，iframe的body标记看起来会获得焦点。我不能模糊主体标签，因为这会导致windows在IE中切换

我创建了一个非常简单的JSFIDLE来显示这种行为-

$（'.test1'）.bind({
向下键：功能（事件）{
如果（event.keyCode==9）{
event.preventDefault（）；
}
},
键控：功能（事件）{
如果（event.keyCode==9）{
$（''）.insertAfter（$（'.test1'）；
$（'.test2'）.val（'test2'）；
bindEvents（）；
$（'.test1'）.remove（）；
$（'.test2'）.focus（）；
}
}
});

因为jsFiddle在iframe中加载html，所以在IE中运行它是可以复制的

这类似于这个问题——他们说它显示光标一秒钟，然后消失。然而，这些解决方案都不适合我。作为参考，我使用jQuery1.8.3

到目前为止，我唯一能解决的问题是延迟将模糊事件绑定到我的输入上，这样它就不会消失。我在寻找更好的解决办法。任何帮助都将不胜感激。提前谢谢

$('.test1').bind({
keydown: function(event) {
    if(event.keyCode == 9) {
        event.preventDefault();
    }
},
keyup: function(event) {
    if(event.keyCode == 9) {
        $('<input type="text" class = "test2"/>').insertAfter($('.test1'));
        $('.test2').val('test2');
        bindEvents();
        $('.test1').remove();
        $('.test2').focus();
   }
}
});