在进入元素之前更改元素的 tabindex答案

【问题标题】：Changing tabindex of element before tabbing into it在进入元素之前更改元素的 tabindex
【发布时间】：2017-06-30 20:04:54
【问题描述】：

我正在尝试使我的验证工作。

默认情况下，我应该无法进入“第二个”元素。
它由附加到“第一个”元素上的 onchange 事件的 js 函数启用。
当我关注“第一个”并单击 Tab 时，我希望 js 函数将完成，然后我将导航到“第二个”元素。
相反，我发现自己处于“第三元素”。

function releaseSecond() {
    document.getElementById('second').tabIndex = 0;
}

<form>
    <label for="first">First</label>
    <input type="text" id="first" tabindex="0" onblur="releaseSecond()"/>
    
    <label for="second">Second</label>
    <input type="text" id="second" tabindex="-1"/>
    
    <label for="third">Third</label>
    <input type="text" id="third" tabindex="0"/>
</form>

可以解决这个问题吗？ TAB 的目标是在调用事件挂钩之前确定的吗？

【问题讨论】：

你能不能只用onfocus="releaseSecond()"而不是onblur
不，我不能。想象一下输入值的一些验证，而不是这个虚拟函数。

标签： javascript html focus tabindex

【解决方案1】：

为什么不使用 .focus？

function releaseSecond() {
    // After you do your code, then go and focus the second element
    document.getElementById('second').focus();
}

<form>
    <label for="first">First</label>
    <input type="text" id="first" tabindex="0" onblur="releaseSecond()"/>
    
    <label for="second">Second</label>
    <input type="text" id="second" tabindex="-1"/>
    
    <label for="third">Third</label>
    <input type="text" id="third" tabindex="0"/>
</form>

【讨论】：