问题描述
这可能是我在使用JavaScript和任何版本的Internet Explorer多年以来遇到的最隐蔽的错误。我们使用YUI 2.7来实现一些（非）方便的方法。感叹，我会为jQuery做些什么....这影响了Internet Explorer 6和Internet Explorer7。 Internet Explorer 8的行为正常。
问题：当我将焦点放在特定元素上时，出现以下错误：
无法将焦点移动到控件上，因为它是不可见的，未启用或者不接受焦点的类型。
所以我有一个名为add-comment-login-overlay的div，它包含input元素。这个div是display：none，直到用户点击一个叫做login的链接。
以下是我使用的JavaScript代码，链接，它移动DOM中的add-comment-login-overlay的位置，设置display：block，然后将焦点设置在叠加中的第一个输入字段上。这是造成我写上面的错误的焦点的过程。
$ $ p $ code获取登录链接在评论形式。
links = YAHOO.util.Dom.getElementsByClassName（'addCommentLoginLink'）;
//设置登录链接的点击事件。
YAHOO.util.Event.addListener（链接，点击，功能（el）{
//停止链接
YAHOO.util.Event.preventDefault（el） ;
//在DOM中移动登录覆盖
if（el.srcElement）{
var target = el.srcElement;
} else {
var target = el.currentTarget;
}
YAHOO.util.Dom.insertAfter（overlay，target.parentNode.parentNode.parentNode.parentNode）;
/ /设置为可见
YAHOO.util.Dom.setStyle（覆盖，'显示'，'块'）;
//将焦点设置为用户名字段
文档。 getElementById（'add-comment-login-overlay-username-input'）。focus（）;
}）;
我可以绝对确认覆盖div完全可见。我可以看看。我已经添加了一个setInterval计时器来衡量发生了什么，并没有任何效果。从某一时刻开始，我有10秒的时间可以看到覆盖图，并且调用了 focus（）并且错误仍然存在。除了这个错误之外，这个表单是完全正常的，除了这个错误。
这是覆盖HTML代码的简化版本，作为参考。
$ b
< div id =add-comment-login-overlayclass =add-comment-login-overlaystyle =display：block; >
< div class =add-comment-login-overlay-content clearfix>
< div class =add-comment-login-overlay-signin clearfix>
< input type =texttabindex =2001id =add-comment-login-overlay-username-input/>
< input type =passwordtabindex =2002id =add-comment-login-overlay-password-input/>
< / div>
< / div>
< / div>
知道它是固定在8）。我不知道官方的原因，但我相信它必须与IE不重绘，直到执行上下文完成后，同时尝试 focus（） the元素，而它认为它仍然隐藏：
$ p $ 函数calledAtSomePoint（）{//开始执行
/ / ...
element.style.display =''; //显示容器
input.focus（）; // IE认为元素被隐藏
//执行结束，IE重新绘制DOM，但是太迟了
}
：
setTimeout（function（）{
document.getElementById（'add-comment-login-overlay-username-input'）。focus（）
}，0）
我曾多次发生过这种情况，包括使用jQuery。这不是任何图书馆的错。 setTimeout 一直为我工作。
This may be the most obscure bug I have yet encountered in many years of working with JavaScript and any version of Internet Explorer. We're using YUI 2.7 for some of the (non)convenience methods. Sigh, what I would do for jQuery....
This is affecting Internet Explorer 6 and Internet Explorer7. Internet Explorer 8 behaves properly. All other browsers also behave properly.
Problem: When I set focus on a particular element, I get the following error:
Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus.
So I have a div called 'add-comment-login-overlay' that contains the input element. This div is display:none until the user clicks one of several links called 'login'.
The following is the JavaScript code I'm using that selects the 'login' links, which moves the position of the 'add-comment-login-overlay' in the DOM, sets display:block, then sets focus on the 1st input field in the overlay. It's this process of setting focus that is causing the error I wrote above.
//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();
});
I can absolutely confirm that the overlay div is completely visible. I can look at it. I have added a setInterval timer to measure what's happening and it has no effect. At one point I had 10 seconds going between the time the overlay was visible and when focus() was called and the error still occurs. Other than the error, the form is completely functional other than this error.
This is a simplified version of the overlay HTML code as a reference.
<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>
This is an old as heck bug in IE (glad to know it's fixed in 8). I don't know the official cause, but I believe it has to do with IE not repainting the DOM until after the execution context is complete, meanwhile trying to focus() the element while it thinks it's still hidden:
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)
I've had it happen many-a-time, including with jQuery. It's no fault of any library. The setTimeout has always worked around it for me.
这篇关于JavaScript：当在输入元素上设置焦点时，Internet Explorer中的可见性错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！