JQuery возвращает новый фокус при переключении с помощью кнопки табуляции

Question

У меня есть функция, которая добавляет/удаляет класс при изменении фокуса между элементами на моей странице.

При переключении фокуса с помощью мыши нажимаем желаемый эффект, но при переключении с помощью кнопки вкладки, кажется, считывается фокус перед переключением на новый элемент?

HTML:

<div class="text-input"> 
    <label>First Name</label> 
    <input placeholder=""> 
</div> 

<div class="text-input"> 
    <label>First Name</label> 
    <input placeholder=""> 
</div> 

JS:

$(document).ready(function() { 
    $("body").click(function() {activateInput($(this))}); 
    $('body').keydown(function(e) { 
     var code = e.keyCode || e.which; 
     if (code == '9') {activateInput($(this))} 
    }); 
}); 


function activateInput(passThis) { 
    $(".text-input input, .text-input label").removeClass("active"); 
    if ($(".text-input input").is(":focus")) { 
    $(":focus").parent().children("label, input").addClass("active"); 
    } 
} 

Fiddle: https://jsfiddle.net/4kdj7Luc/

Answer 1

использование KeyUp

$(document).ready(function() { 
 

 
    $("body").click(function() {activateInput()}); 
 
    $('body').keyup(function(e) { 
 
     var code = e.keyCode || e.which; 
 
     if (code == 9) {activateInput();} 
 
    }); 
 
}); 
 

 

 
function activateInput() { 
 
    $(".text-input input, .text-input label").removeClass("active"); 
 
    $(':focus').parent().children("label, input").addClass("active"); 
 
}