Question

例如

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

当我输入光标为 username 的输入时按下Tab键时，如何使用JS获取名称为 password 的新焦点元素

当我获得带有此代码的元素时；

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

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

});

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

Answer 1

您的事件侦听器已绑定到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>

如何通过使用JS获得集中的表单元素？

1 个答案: