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

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

1 个答案: