我有一个 HTML,内容如下:
<div class="hiddenClass"> // this implies display:none
<span>
<input type="text" id="hiddenInput"/>
</span>
</div>
和一个 Javascript 事件(在 jQuery $.ajax() 调用的“succes”方法中触发),需要使该 div 可见,然后将焦点设置到该控件。就像是:
this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
this.DOMElements.hiddenInputElement.focus();
this.DOMElements.hiddenInputElement.select();
奇怪的是,这段代码只在部分时间有效。在某些情况下(仅有时!!),焦点/选择命令会生成有关聚焦/选择不可见控件的警告。控件将变得可见,但焦点不会移动,文本也不会被选择。
我(在某种程度上)找到了一个解决方案,将焦点/选择代码移动到一个单独的函数中,并通过以下方式延迟调用它:
this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
setTimeout("focusinput('hidddenInput')",1);
好吧,最后我的问题是:由于 javascript 是单线程的。为什么在我使父 div 可见的时间和我可以在子输入元素上设置焦点/选择的时间之间存在延迟?这怎么可能是竞争条件呢?
编辑:发生在 IE8 中
如果您使用 jQuery,请使用它来显示和设置焦点:
$(".hiddenClass").fadeIn("fast",
function() {
$("#hiddenInput").focus();
}
);
or
$(".hiddenClass").show(0,
function() {
$("#hiddenInput").focus();
}
);
如果你想在没有淡入的情况下显示它。
基本上,它正在淡入隐藏的 div(如果您希望显示特定的 div 而不是所有具有 .hiddenClass 的元素,则可以将 .hiddenClass 替换为 id),一旦完成,它就会执行回调函数以将焦点集中在输入。
这样,在 div 完全显示之前,您不会尝试给予输入焦点。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)