javascript - 如何使用JS获得焦点表单元素？

Question

例如

<form>
    <div class="form-control">
       <input type="text" name="username">
    </div>
    <div class="form-control">
       <input type="text" name="password">
    </div>
</form>

当光标处于名称为用户名的输入时按Tab键时，如何使用JS获取名称为密码的新焦点元素

当我使用此代码获取元素时；

document.addEventListener('keydown', function(evt) 
{

    if (evt.keyCode === 9) {
       console.log(document.activeElement);
    }

});

这返回了 input-1，其名称是用户名，但我想获取密码输入。我该怎么办？

Answer 1

您的事件监听器绑定(bind)到 keydown，这意味着它将在实际按键“完成”(向下然后向上)之前触发，因此事件处理程序时焦点实际上并未改变执行。更改为 keyup ，焦点将在事件处理程序之前发生变化。

document.addEventListener('keyup', function(evt) 
{

    if (evt.keyCode === 9) {
       console.log(document.activeElement);
    }

});

<form>
    <div class="form-control">
       <input type="text" name="username">
    </div>
    <div class="form-control">
       <input type="text" name="password">
    </div>
</form>