显示 <select> 字段时关注文本输入字段答案

【问题标题】：Focusing on Text Input Field When <select> field is shown显示 <select> 字段时关注文本输入字段
【发布时间】：2012-08-30 18:57:51
【问题描述】：

我正在创建一个表单部分，当用户选中相应的复选框时，它会显示输入字段（文本或选择字段）。我遇到的问题是，如果您显示了选择和文本输入之一，如果您尝试单击要输入的文本字段，它会将焦点跳转到选择，从而无法在该字段中输入。

我正在使用 jQuery 来实现功能（最新版本），并正在执行以下 javascript 代码来实现这一点。随之而来的 HTML 在此下方。

//Class Year Dropdown
$("#ifClassScholashipsSelected").css("display", "none");
$(".enableClassYearSelection").click(function() {
    if ($("input[name=Class_Scholarships]:checked").val() == "class_scholarships") {
        $("#ifClassScholashipsSelected").slideToggle("fast"); //Slide Down Effect
    } else {
        $("#ifClassScholashipsSelected").slideToggle("fast"); //Slide Up Effect
    }
});
//Other Funds Dropdown
$("#ifOtherFundsSelected").css("display", "none");
$(".enableOtherFunds").click(function() {
    if ($('input[name=OtherFunds]:checked').val() == "other_funds") {
        $("#ifOtherFundsSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifOtherFundsSelected").slideUp("fast"); //Slide Up Effect
    }
});
//In Memory Of Dropdown
$("#ifInMemoryOfSelected").css("display", "none");
$(".enableInMemoryOf").click(function() {
    if ($('input[name=InMemoryOf]:checked').val() == "in_memory_of") {
        $("#ifInMemoryOfSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifInMemoryOfSelected").slideUp("fast"); //Slide Up Effect
    }
});
//In Honor Of Dropdown
$("#ifInHonorOfSelected").css("display", "none");
$(".enableInHonorOf").click(function() {
    if ($('input[name=InHonorOf]:checked').val() == "in_honor_of") {
        $("#ifInHonorOfSelected").slideDown("fast"); //Slide Down Effect
    } else {
        $("#ifInHonorOfSelected").slideUp("fast"); //Slide Up Effect
    }
});

这对以下代码有影响：

<input type="checkbox" name="Class_Scholarships" value="class_scholarships" class="enableClassYearSelection" />
    <label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em></label> <br />
        <select name="SelectedClassYear">
            <option value="NoClass">Choose a Class</option>
            <option value="Class_Of_2003">Class of 2003 Scholarship IHO Ralph A. Crawley</option>
            <option value="Class_Of_2004">Class of 2004 Scholarship IMO C. Frazier 04 &amp; IHO W. Simms</option>
            <option value="Class_Of_2005">Class of 2005 Scholarship IMO Prof. Lee Cohen</option>
            <option value="Class_Of_2006">Class of 2006 Scholarship IMO Peter C. Bance Jr</option>
            <option value="Class_Of_2007">Class of 2007 Scholarship IHO Lt. Gen. Sam Wilson</option>
            <option value="Class_Of_2008">Class of 2008 Scholarship IHO Ms. Gerry Pettus</option>
            <option value="Class_Of_2009">Class of 2009 Scholarship</option>
            <option value="Class_Of_2010">Class of 2010 Scholarship IHO Mrs. Dottie Fahrner</option>
            <option value="Class_Of_2011">Class of 2011 Scholarship IHO Ms. Anita Garland</option>
            <option value="Class_Of_2012">Class of 2012 Scholarship IHO Mr. Jason M. Ferguson 96</option>
            <option value="Class_Of_1951">Class of 1951 Memorial Scholarship</option>
            <option value="Class_Of_1953">Class of 1953 Scholarship Endowment</option>
            <option value="Class_Of_1954">Class of 1954 Wilson Center Lecture Series</option>   
            <option value="Class_Of_1958">Class of 1958 Summer College Endowment Fund</option>  
            <option value="Class_Of_1960">Class of 1960 Good Men Good Citizens Scholarship</option>  
            <option value="Class_Of_1961">Class of 1961 Good Men Good Citizens Scholarship</option>
            <option value="Class_Of_1980">Class of 1980 Endowed Scholarship</option>
        </select>
    </div>
    <!--End Dropdown-->
    <br />

<input type="checkbox" name="CultureandCommunity" value="culture_and_community" />
    <label><strong>Culture and Community</strong> &mdash; Supports the arts at Hampden-Sydney and service opportunities locally and around the world.</label><br />
    <input type="checkbox" name="OtherFunds" value="other_funds" class="enableOtherFunds" />
    <label><strong>Would you like to donate to other funds?</strong></label>
        <!--Dropdown if selected-->
            <div id="ifOtherFundsSelected">
                <em>Please select the fund below</em></label> <br />
                <div class="scrolllist">
                    <input type="checkbox" name="BortzLibrary" value="1" /> Bortz Library<br />
                    <input type="checkbox" name="EstherAtkinsonMuseum" value="1"  />Esther Atkinson Museum<br />
                    <input type="checkbox" name="EverettStadium" value="1" />Everett Stadium<br />
                    <input type="checkbox" name="GMGCScholarship" value="1" />Good Men Good Citizens Scholarship<br />
                    <input type="checkbox" name="KirkAthleticCenter" value="1" />Kirk Athletic Center<br />
                    <input type="checkbox" name="BaseballBigHittersClub" value="1"  />Baseball Big Hitters Club<br />
                    <input type="checkbox" name="BasketballRoundballClub" value="1" />Basketball Roundball Club<br /> 
                    <input type="checkbox" name="CrossCountryHarriers" value="1" />Cross Country Harriers<br />
                    <input type="checkbox" name="GolfHoleOneClub" value="1" />Golf Hole In One Club<br />
                    <input type="checkbox" name="FootballGridironClub" value="1" />Football Gridiron Club<br />
                    <input type="checkbox" name="LacrosseFaceOffClub" value="1" />Lacrosse Face Off Club<br />                                                                       
                    <input type="checkbox" name="SoccerGoalClub" value="1" />Soccer Goal Club<br />   
                    <input type="checkbox" name="TennisRacquetClub" value="1" />Tennis Racquet Club<br /> 
                    <input type="checkbox" name="SwimmingClub" value="1" />Swimming Club<br />
                    <input type="checkbox" name="RugbyClub" value="1" />Rugby Club<br />  
                    <input type="checkbox" name="UnrestrictedCapital" value="1" />Unrestricted Capital<br />   
                    <input type="checkbox" name="WilsonCenter" value="1" />Wilson Center<br />
                    <input type="checkbox" name="Other" value="1" />Other&mdash;<em>Explain in Special Instructions</em><br />                                
        </div>
            </div>
            <!--End Dropdown-->
            <br />

            <input type="checkbox" name="InMemoryOf" value="in_memory_of" class="enableInMemoryOf" />
        <label><strong>Is Your Donation In Memory of Someone?</strong></label>
            <!--Dropdown if selected-->
                <div id="ifInMemoryOfSelected">
                    <em>Who is your gift in memory of?</em></label> <br />
                    <input type="text" name="nameOfInMemory" size="85" value="" />
                </div>
                <!--End Dropdown-->
                <br />

                <input type="checkbox" name="InHonorOf" value="in_honor_of" class="enableInHonorOf" />
            <label><strong>Is Your Donation In Honor of Someone?</strong></label>
            <!--Dropdown if selected-->
                    <div id="ifInHonorOfSelected">
                    <em>Who is your gift in honor of?</em></label> <br />
                    <input type="text" name="nameOfInHonor" size="85" value="" />
                    </div>
                    <!--End Dropdown-->

新的更正标记：

<input type="checkbox" name="Class_Scholarships" value="class_scholarships" class="enableClassYearSelection" />
    <label><strong>Class Scholarships</strong></label>
    <!--Dropdown if selected-->
    <div id="ifClassScholashipsSelected">
        <label><em>Please select the appropriate class below</em></label>
        <br />
        <select name="SelectedClassYear">
        <option value="NoClass">Choose a Class</option>
        <option value="Class_Of_2003">Class of 2003 Scholarship IHO Ralph A. Crawley</option>
        <option value="Class_Of_2004">Class of 2004 Scholarship IMO C. Frazier 04 &amp; IHO W. Simms</option>
        <option value="Class_Of_2005">Class of 2005 Scholarship IMO Prof. Lee Cohen</option>
        <option value="Class_Of_2006">Class of 2006 Scholarship IMO Peter C. Bance Jr</option>
        <option value="Class_Of_2007">Class of 2007 Scholarship IHO Lt. Gen. Sam Wilson</option>
        <option value="Class_Of_2008">Class of 2008 Scholarship IHO Ms. Gerry Pettus</option>
        <option value="Class_Of_2009">Class of 2009 Scholarship</option>
        <option value="Class_Of_2010">Class of 2010 Scholarship IHO Mrs. Dottie Fahrner</option>
        <option value="Class_Of_2011">Class of 2011 Scholarship IHO Ms. Anita Garland</option>
        <option value="Class_Of_2012">Class of 2012 Scholarship IHO Mr. Jason M. Ferguson 96</option>
        <option value="Class_Of_1951">Class of 1951 Memorial Scholarship</option>
        <option value="Class_Of_1953">Class of 1953 Scholarship Endowment</option>
        <option value="Class_Of_1954">Class of 1954 Wilson Center Lecture Series</option>   
        <option value="Class_Of_1958">Class of 1958 Summer College Endowment Fund</option>  
        <option value="Class_Of_1960">Class of 1960 Good Men Good Citizens Scholarship</option>  
        <option value="Class_Of_1961">Class of 1961 Good Men Good Citizens Scholarship</option>
        <option value="Class_Of_1980">Class of 1980 Endowed Scholarship</option>
    </select>
    </div>
    <!--End Dropdown-->
    <br />

<input type="checkbox" name="CultureandCommunity" value="culture_and_community" />
<label><strong>Culture and Community</strong> &mdash; Supports the arts at Hampden-Sydney and service opportunities locally and around the world.</label><br />

<input type="checkbox" name="OtherFunds" value="other_funds" class="enableOtherFunds" />
    <label><strong>Would you like to donate to other funds?</strong></label>
    <!--Dropdown if selected-->
        <div id="ifOtherFundsSelected">
            <label><em>Please select the fund below</em></label> <br />
                <div class="scrolllist">
                <input type="checkbox" name="BortzLibrary" value="1" /> Bortz Library<br />
                <input type="checkbox" name="EstherAtkinsonMuseum" value="1"  />Esther Atkinson Museum<br />
                <input type="checkbox" name="EverettStadium" value="1" />Everett Stadium<br />
                <input type="checkbox" name="GMGCScholarship" value="1" />Good Men Good Citizens Scholarship<br />
                <input type="checkbox" name="KirkAthleticCenter" value="1" />Kirk Athletic Center<br />
                <input type="checkbox" name="BaseballBigHittersClub" value="1"  />Baseball Big Hitters Club<br />
                <input type="checkbox" name="BasketballRoundballClub" value="1" />Basketball Roundball Club<br /> 
                <input type="checkbox" name="CrossCountryHarriers" value="1" />Cross Country Harriers<br />
                <input type="checkbox" name="GolfHoleOneClub" value="1" />Golf Hole In One Club<br />
                <input type="checkbox" name="FootballGridironClub" value="1" />Football Gridiron Club<br />
                <input type="checkbox" name="LacrosseFaceOffClub" value="1" />Lacrosse Face Off Club<br />                                                                       
                <input type="checkbox" name="SoccerGoalClub" value="1" />Soccer Goal Club<br />   
                <input type="checkbox" name="TennisRacquetClub" value="1" />Tennis Racquet Club<br /> 
                <input type="checkbox" name="SwimmingClub" value="1" />Swimming Club<br />
                <input type="checkbox" name="RugbyClub" value="1" />Rugby Club<br />  
                <input type="checkbox" name="UnrestrictedCapital" value="1" />Unrestricted Capital<br />   
                <input type="checkbox" name="WilsonCenter" value="1" />Wilson Center<br />
                <input type="checkbox" name="Other" value="1" />Other&mdash;<em>Explain in Special Instructions</em><br />                                
        </div>
        </div>
        <!--End Dropdown-->
        <br />

                                <input type="checkbox" name="InMemoryOf" value="in_memory_of" class="enableInMemoryOf" />
                            <label><strong>Is Your Donation In Memory of Someone?</strong></label>
                            <!--Dropdown if selected-->
                                <div id="ifInMemoryOfSelected">
                                    <label><em>Who is your gift in memory of?</em></label> <br />
                                    <input type="text" name="nameOfInMemory" size="85" value="" />
                                </div>
                                <!--End Dropdown-->
                                <br />

                                <input type="checkbox" name="InHonorOf" value="in_honor_of" class="enableInHonorOf" />
                            <label><strong>Is Your Donation In Honor of Someone?</strong></label>
                            <!--Dropdown if selected-->
                                <div id="ifInHonorOfSelected">
                                    <label><em>Who is your gift in honor of?</em></label> <br />
                                    <input type="text" name="nameOfInHonor" size="85" value="" />
                                </div>
                                <!--End Dropdown-->

【问题讨论】：

标签： jquery select input focus slideup

【解决方案1】：

发生这种情况是因为您的 HTML 无效。

在 HTML 的开头附近，您打开了一个 <label> 标记。在该<label> 标签内，您打开一个<div> 标签。然后在关闭<div> 标记之前关闭<label> 标记。

这是一个禁忌。移动你的</label> 标签，它就可以工作了：

更改： jsFiddle

    <label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em></label> <br />

收件人： jsFiddle

<label><strong>Class Scholarships</strong></label>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
    <em>Please select the appropriate class below</em><br />

【讨论】：

我只是想在您发布答案时提及 :) 标记中还有其他问题，但您指出的是主要问题。
哇哦，真不敢相信我错过了。我将通过一个验证器运行它，看看我在哪里搞砸了。谢谢！
看起来你在“你的礼物是为了纪念谁？”旁边还有几个杂散的标签。和“你的礼物是为了纪念谁？”。
哇，我有很多流浪标签。谢谢！

【解决方案2】：

因为这行的问题

<label><strong>Class Scholarships</strong>
<!--Dropdown if selected-->
<div id="ifClassScholashipsSelected">
<em>Please select the appropriate class below</em></label> <br />
    <select name="SelectedClassYear">

您在 Div 之前打开标签并在 Div 中关闭它。

 <label> 
 <div>
 </label> 
 </div>

这是 JsFiddle Demo

【讨论】：

谢谢，在通过 W3C 验证器运行它后，我确实在一些地方搞砸了。感谢您的帮助。我以后要记得在问之前检查一下。不过谢谢！
不客气，每个人都有同样的错误，别介意人。