jQuery将焦点集中在同一页面中多个表单的第一次输入上答案

【问题标题】：jQuery set focus on first input of multiple forms in the same page one at a timejQuery将焦点集中在同一页面中多个表单的第一次输入上
【发布时间】：2019-07-17 16:56:50
【问题描述】：

我在同一页面上有三组表单，一次只显示一个表单。其他表单隐藏在页面中，可以通过下一步按钮导航表单。每当加载每个表单时，我都需要将焦点设置在第一个输入上。

如何使用 jQuery 实现这一点？

JS Fiddle

  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-set">
        <form>
          <h4>
            Form Set 1
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" autofocus="autofocus">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form class= "form-2" style="display:none">
          <h4>
            Form Set 2
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form class= "form-3"  style="display:none">
          <h4>
            Form Set 3
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

How to Set Focus on Input Field using JQuery的可能重复
是的。并在答案中找到如何将焦点设置在输入上。因为您已经设法使用 jquery 更改并获取表单，所以我假设您会弄清楚如何定位该特定输入

标签： jquery html

【解决方案1】：

您可以添加如下内容：

$(".form-set form:visible").find('input')[0].focus();

【讨论】：

【解决方案2】：

您可以在 HTML 中将每个第一个输入设置为“自动对焦”。当它取消隐藏时，它会自动被选中。（请注意，这在 Codepen/JSFiddle-Window 中可能不起作用，请单独测试它）

【讨论】：