javascript - 设置显示 :block 后将焦点设置在输入元素上

Question

我有一个 HTML 如下:

<div class="hiddenClass"> // this implies display:none
 <span>
    <input type="text" id="hiddenInput"/>
 </span>
</div>

和一个 Javascript 事件(在 jQuery $.ajax() 调用的“成功”方法中触发)，需要使此 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 的元素，您可以用 id 替换 .hiddenClass)，一旦完成，它就会执行回调函数以提供专注于输入。

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