Ich möchte nicht fokussieren, wenn der Benutzer auf bestimmte div konzentriert

Question

Ich benutze focusin() -Funktion, um div dynamisch unterhalb der Eingabebox, die fokussiert wird, anzuhängen. Jetzt, wenn ich den Fokus entferne, entferne ich das dynamisch angehängte div, aber das Problem ist, dass ich verhindern möchte, dass div sich selbst entfernt, wenn sich der Benutzer auf dieses div konzentriert.

Mein Code:

$('.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

Sie können einen Ereignishandler zum dynamischen div hinzufügen, die den Fokus ändert verhindern kann, wenn das div geklickt wird. Dies wird nicht helfen, wenn der Fokus durch Drücken von TAB geändert wird, was wünschenswert sein kann oder auch nicht.

Ein Effekt davon ist, dass der Text im dynamischen div nicht mit einer Maus ausgewählt werden kann. Wenn Sie dieses Verhalten möchten, sollten Sie darüber nachdenken, zu einer klassenbasierten Lösung zu wechseln, die Ihnen mehr Kontrolle über Statusänderungen bietet.

$('.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">