Я не хочу фокусировать, если пользователь сфокусирован на конкретном div

Question

Я использую функцию focusin(), чтобы добавить динамически динамически под поле ввода, которое фокусируется. Теперь, когда пользователь фокусируется, я удаляю этот динамически добавленный 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">