Question

在这个小提琴中有一个div，里面有两个元素。

HTML：

<div tabindex=0>
    <input type="text" value="hello"/>
    <input type="button" class="hidden" value ="hola"/>
</div>

Javascript：

$(document).ready(function() {
    $("div").focusin(function() {
        console.log("focus in");
        $("input[type=button]").removeClass("hidden");
    });
    $("div").focusout(function() {
        console.log("focus out");
        $("input[type=button]").addClass("hidden");
    });
});

我希望发生以下行为：如果我在div中单击（包括子项），我想在其中显示一个按钮。

在chrome中，如果我按下按钮然后单击它，会发生什么情况是焦点丢失并重新获得，这对我来说没问题，即使它在技术上不正确。

但是在火狐焦点没有恢复。

我该如何做到这一点？

Answer 1

问题在于，当文本输入是焦点并且您单击按钮时，

首先，在文本输入上触发focusout，隐藏按钮
然后，由于该按钮已隐藏，因此无法获得焦点，因此不会触发focusin。

你可以这样解决：

在focusout事件侦听器中，不要立即隐藏元素，而是使用setTimeout。
在focusout事件监听器中，如果尚未运行，请清除超时。

＆＃13;

var $target = $("input[type=button]"),
    timer;
$("div")
.focusin(function() {
    clearTimeout(timer);
    $target.removeClass("hidden");
})
.focusout(function() {
    timer = setTimeout(function() {
        $target.addClass("hidden");
    }, 0);
});

＆＃13;

.hidden {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0">
    <input type="text" value="hello"/>
    <input type="button" class="hidden" value="hola" />
</div>

＆＃13;

单击孩子时如何不丢失元素焦点

1 个答案: