JS - 聚焦/选择切换后的光标

Question

我有两种形式的登录页面，只有一种形式在tme中可见。第一种形式是一种年龄验证形式，如果符合条件，我使用jQuery .toggle()切换到下一个表单。在页面加载，好UX我使用.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()或其他方法将光标置于.toggle()事件之后的第二个表格<input type="text" name="email" />的第一个字段中？我试过在.toggle()之后直接放置.focus()事件，这似乎合乎逻辑但不成功。

Answer 1

您需要先隐藏订阅形式：

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

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