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

时间：2012-08-30 18:57:51

标签： jquery select input focus slideup

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

我使用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-->

2 个答案:

答案 0 :(得分：3)

这是因为您的HTML无效。

在HTML的开头附近，您打开<label>标记。在<label>标记内，您可以打开<div>标记。然后，在关闭<label>代码之前关闭<div>代码。

这是禁忌。移动您的</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 />

答案 1 :(得分：0)

因为这行问题

<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>

这是The JsFiddle Demo

相关问题
最新问题