JavaScript的：输入的元素设置上的焦点，当在Internet Explorer中的可见性错误

这可能是最不起眼的错误我在多年的使用JavaScript和Internet Explorer的任何版本的工作还没有遇到过。我们使用YUI 2.7对于一些（非）方便的方法。叹了口气，我会的jQuery做....

这是影响Internet Explorer 6和Internet Explorer7。 Internet Explorer 8的正常行为。所有其他浏览器也表现正常。

问题：当我将焦点设置一个特定的元素上，我得到以下错误：

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.

所以我有一个名为“添加注释登录叠加”的div包含输入元素。这个div是显示：没有，直到用户点击的几个环节叫“登录”之一。

以下是JavaScript代码我使用，其选择“登录”链接，其移动“添加注释登录叠加”在DOM，设置显示器的位置：块，然后将焦点设置在第一输入栏在叠加。它的设置，是造成我上面写的错误焦点的过程。

//Get Login links in comment forms.
links = YAHOO.util.Dom.getElementsByClassName('addCommentLoginLink');

//Set click event for login links.
YAHOO.util.Event.addListener(links, "click", function(el){

    //Stop link.
    YAHOO.util.Event.preventDefault(el);

    //Move login overlay in DOM.
    if( el.srcElement ){
        var target = el.srcElement;
    }else{
        var target = el.currentTarget;
    }

    YAHOO.util.Dom.insertAfter( overlay, target.parentNode.parentNode.parentNode.parentNode );

    //Set to visible.
    YAHOO.util.Dom.setStyle( overlay,'display', 'block' );

    //Set focus to username field.
    document.getElementById('add-comment-login-overlay-username-input').focus();
});

我绝对可以确认覆盖DIV是完全可见。我可以看看它。我添加了一个计时器的setInterval衡量发生了什么和它没有任何效果。有一次，我有10秒的时间重叠是可见的，当之间正在进行focus()被调用，仍然出现错误。除了错误，形式比这个错误完全的功能等。

这是覆盖HTML代码作为参考的简化版本。

<div id="add-comment-login-overlay" class="add-comment-login-overlay" style="display: block;">
    <div class="add-comment-login-overlay-content clearfix">
        <div class="add-comment-login-overlay-signin clearfix">
            <input type="text" tabindex="2001" id="add-comment-login-overlay-username-input"/>
            <input type="password" tabindex="2002" id="add-comment-login-overlay-password-input"/>
        </div>
    </div>
</div>

Answer 1:

这是一个老的IE浏览器中的漏洞到底（很高兴知道它的固定在8）。我不知道官方的原因，但我相信这与IE不重绘DOM后才执行上下文完成，同时试图做focus()而它认为它仍然隐藏元素：

function calledAtSomePoint() { // begin execution

    // ...

    element.style.display = ''; // show container
    input.focus(); // IE thinks element is hidden 

    // end of execution, IE repaints the DOM but it's too late
}

该解决方案是使用setTimeout ：

setTimeout(function() {
    document.getElementById('add-comment-login-overlay-username-input').focus()
}, 0)

我已经受够了发生许多-A-时间，包括使用jQuery。这是没有任何图书馆的过错。该setTimeout始终围绕它为我工作。

Answer 2:

设置在一个try / catch块的焦点。

Answer 3:

在猜测，我会说， insertAfter呼叫混淆IE DOM。您可以测试没有代码insertAfter电话吗？以同样的方式失败？如果不是，有另一种方式，你可以达到同样的效果？也许复制节点并删除原件，而不是移动节点？