javascript - JS - 切换 Div 后再次聚焦/选择光标

Question

我有一个包含两个表单的登陆页面，一次只有一个表单可见。第一个表单是年龄验证表单，如果满足条件，我使用 jQuery .toggle()切换到下一个表格。在页面加载时，为了获得良好的用户体验，我使用 .focus()使用以下代码行将光标放在第一个表单字段中:$("input[name='month']").focus();

// Focus cursor on first input field

$("input[name='month']").focus();

var age = 19;
// After calculating age based on user input, toggle the elements

if (age >= 18) {
  $('#age-verification').toggle();
  $('#subscribe').toggle();
} else {
  $('#age-verification').html('<h2>Sorry, you must be at least 18 years old.</h2>');
}

<div id="age-verification">
   <h2>Must be 18, please verify age</h2>
   <input type="number" name="month" />
   <input type="number" name="day" />
   <input type="number" name="year" />
   <button id="age-gate-submit">Submit</button>
</div>

<form id="subscribe" action="#" method="post">
   <input type="text" name="email" />
   <input type="text" name="zip" />
   <button id ="subscribe" type="submit">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

我如何使用 .select() , focus()或其他方法将光标置于第二个表单的第一个字段 <input type="text" name="email" /> .toggle()之后事件？我尝试放置 .focus()事件直接发生在.toggle()之后这看起来合乎逻辑，但并不成功。

Answer 1

您需要先隐藏订阅表单:

$('#subscribe').hide();

工作演示:http://jsbin.com/kihepujewi/edit?html,js,output