javascript - 自动聚焦表单中事件 div 内的第一个表单元素

Question

我有一个包含多个 div (10+) 的表单，一次仅显示 1 个，而其余部分设置为 display:hidden。当我单击 Next code> 按钮，当前 div 隐藏，下一个 div 可见。还有一个上一页按钮。
有没有办法使用 JavaScript 将当前可见 div 的第一个表单元素聚焦？

HTML结构如下:

<form id = "myForm">
<div id="div1">
<!-------Div can hav 2 cols---->
    <div class = "row">
        <div class= "col">
            <input autofocus>
        </div>
        <div class = "col">
            <select></select>
        </div>
    </div>
</div>
<div id="div2" style = "display: none;">
<!-------Or Div can have 1 col---->
    <div class = "row">
        <div class = "col">
             <!-------First element can be input---->
            <input>
        </div>
    </div>
</div>
<div id="div3" style = "display: none;">
    <div class = "row">
        <div class = "col">
             <!-------Or First element can be select---->
             <select> </select>
             <input>
        </div>
    </div>
</div>
<!-------More Divs---->
</form>

自动对焦适用于第一个元素，但随后我需要使用 JavaScript 关注表单内其余 div 的第一个元素。

Answer 1

为此，您必须使用 css :visible 修饰符并在每次发生更改时调用此代码

使用jquery:

function focusOnVisible(){
    $("#myForm input:visible, #myForm input:visible").first().focus()
}

然后在页面加载时调用此函数并在单击下一个按钮后

$('document').ready(focusOnVisible);
$('.next').click(focusOnVisible);