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

Question

这可能是我多年来使用 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.

所以我有一个名为“add-comment-login-overlay”的 div，其中包含输入元素。在用户单击多个名为“登录”的链接之一之前，此 div 为 display:none。

以下是我使用的选择“登录”链接的 JavaScript 代码，它移动 DOM 中的“添加评论登录覆盖”的位置，设置 display:block，然后将焦点设置在叠加层中的第一个输入字段。正是这个设置焦点的过程导致了我上面写的错误。

//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 计时器来测量正在发生的事情，但它没有任何效果。有一次，我在覆盖层可见和调用focus()之间有10秒的时间，但错误仍然发生。除了这个错误之外，这个表单除了这个错误之外是完全正常的。

这是一个简化版的覆盖 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
} 

The solution is to use setTimeout:

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

我曾经多次遇到过这种情况，包括使用 jQuery。这不是任何图书馆的错。 setTimeout 一直为我工作。

Answer 2

在 try/catch 块中设置焦点。