當使用Tab鍵切換時，Jquery返回新的焦點

Question

我有一個函數在我的頁面上的元素之間改變焦點時添加/刪除一個類。

當用鼠標單擊切換焦點時會產生所需的效果，但使用Tab鍵切換時，它似乎在切換到新元素之前會讀取焦點？

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"); 
    } 
} 

小提琴： 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"); 
 
}