时间戳

首页 > 解决方案 > 自动对焦表单中活动 div 内的第一个表单元素

javascript - 自动对焦表单中活动 div 内的第一个表单元素

问题描述

我有一个包含多个 div (10+) 的表单，我一次只显示 1 个，而其余的设置为display: hidden。当我单击Next按钮时，当前 div 被隐藏，下一个 div 变得可见。还有一个Previous按钮。
有没有办法使用 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 的第一个元素上。

标签： javascripthtml

解决方案

如果您分享您的下一个和上一个按钮单击功能，那么很容易理解您的结构并能够以非常简单的方式给出解决方案。

我还准备了以下解决方案。

 $("#myForm > div:visible .col").first().find('input').focus();

每次单击下一个和上一个按钮时，您都需要检查。所以你需要在 next 和 prev 函数中添加这段代码。

编辑：请在表单控件（输入、选择等）中提供一个通用类，然后在查找元素中使用它（替换类而不是输入）。

推荐阅读