我不想專注於如果用戶專注於特定的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">