[英]JavaScript: Visibility error in Internet Explorer when setting focus on an input element
这可能是我在使用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,它包含input元素。 此div显示:none,直到用户单击名为“login”的多个链接之一。
以下是我正在使用的JavaScript代码,它选择'login'链接,它移动DOM中'add-comment-login-overlay'的位置,设置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>
这是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(function() {
document.getElementById('add-comment-login-overlay-username-input').focus()
}, 0)
我曾多次使用它,包括使用jQuery。 这不是任何图书馆的错。 setTimeout
总是为我解决它。
将焦点设置在try / catch块中。
猜测,我会说insertAfter
调用混淆了IE DOM。 你可以在没有insertAfter
调用的情况下测试代码吗? 它是否以同样的方式失败? 如果没有,是否有另一种方法可以达到相同的效果? 也许复制节点并删除原件,而不是移动节点?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.