如何使用 JS 获得焦点表单元素？答案

【问题标题】：How can I get focused form element by using JS?如何使用 JS 获得焦点表单元素？
【发布时间】：2018-11-28 11:58:02
【问题描述】：

例如

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

});

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

【问题讨论】：

标签： javascript forms focus keycode onfocus

【解决方案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>

【讨论】：