如何使用 JS 获取焦点表单元素？

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 键时，如何获取名称为 password[=24 的新焦点元素=] 使用 JS

当我用这段代码获取元素时；

document.addEventListener('keydown', function(evt) { if (evt.keyCode === 9) { console.log(document.activeElement); } });

这返回了名称为 username 的 input-1，但我想获得 password 输入。我怎么能？

Answer 1

您的事件侦听器绑定到 keydown，这意味着它会在实际按键按下 "complete"（按下然后向上）之前触发，因此事件发生时焦点实际上并没有改变处理程序执行。更改为 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 获取焦点表单元素？

How can I get focused form element by using JS?

javascript

forms

focus

keycode

onfocus