Question

我有一个包含多个div（10+）的表单，并且一次只显示1，其余设置为display: hidden。当我单击Next按钮时，当前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的第一个元素。

Answer 1

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

使用jquery：

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

然后在页面加载时以及在单击下一步按钮之后调用它

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

Answer 2

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

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

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

您需要在单击下一步和上一步按钮时进行每次检查。因此，您需要在next和prev函数中添加此代码。

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

Answer 3

您可以尝试

<!DOCTYPE html>
<html>
<body>

<form id="form">
<input type="text"  />
<input type="text" />
<div>

</div>
</form>
<script>
var f = document.getElementById("form");
f[1].focus();
</script>
</body>
</html>

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

3 个答案: