我不想专注于如果用户专注于特定的div

Question

我正在使用focusin（）函数在被聚焦的输入框下动态添加div。现在，当用户focusout我删除动态追加div，但问题是我想防止该div从本身删除，如果用户专注于该div。

我的代码：

$('.ok').focusin(function() { 
 
    $('.ok').after('<div class="thisdiv" tabindex="1">Okay Okay Okay</div>'); 
 
}); 
 

 
$('.ok').focusout(function() { 
 
    if (!$('.thisdiv').is(':focus')) { 
 
    $('.thisdiv').remove(); 
 
    } 
 
});

.thisdiv { 
 
    background: red; 
 
    border: 2px dashed; 
 
    width: 400px; 
 
    padding: 50px; 
 
} 
 
.thisdiv:hover, 
 
.thisdiv:active, 
 
.thisdiv:focus { 
 
    display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="ok">

的jsfiddle：https://jsfiddle.net/hq5dy61j/4/

Answer 1

您可以添加一个事件处理程序的动态格，可以防止将焦点从被点击DIV时改变。当通过按TAB改变焦点时这不会有帮助，这可能或不可取。

这样做的一个影响是动态div中的文本不能用鼠标选择。如果你想要这种行为，你可能想考虑切换到一个基于类的解决方案，它可以让你更好地控制状态变化。

$('.ok').focusin(function() { 
 
    var $this = $(this), 
 
    $div = $('<div class="thisdiv" >Okay Okay Okay</div>'); 
 

 
    $div.on('mousedown', function(e){ 
 
     e.preventDefault(); 
 
    }); 
 
    $this.after($div); 
 
}); 
 

 
$('.ok').focusout(function() { 
 
    $('.thisdiv').remove(); 
 
});

.thisdiv { 
 
    background: red; 
 
    border: 2px dashed; 
 
    width: 400px; 
 
    padding: 50px; 
 
} 
 
.thisdiv:hover, 
 
.thisdiv:active, 
 
.thisdiv:focus { 
 
    display: block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="ok">