设置 display:block 后将焦点设置在输入元素上

Question

我有一个 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 中

Answer 1

如果您使用 jQuery，请使用它来显示和设置焦点：

$(".hiddenClass").fadeIn("fast", 
    function() {
        $("#hiddenInput").focus();
    }
);

或者

$(".hiddenClass").show(0, 
    function() {
        $("#hiddenInput").focus();
    }
);

如果你想在没有淡入的情况下显示它。

基本上，它正在淡入隐藏的 div（如果您希望显示特定的 div 而不是所有具有 .hiddenClass 的元素，则可以将 .hiddenClass 替换为 id），一旦完成，它就会执行回调函数以将焦点集中在输入。

这样，在 div 完全显示之前，您不会尝试给予输入焦点。