2

うまく機能するフォームを作成しました。ただし、チェックボックスの画像をカスタマイズした後、「Enter」キーを押してフォームを送信できません。どんな助けでも大歓迎です。

EDIT ご回答ありがとうございます。ただし、私のページには、複数のフォームがあります (もちろん...)

プロセス: フォーカス フォームを検出する必要があります。#Form_filters 検索フォームにフォーカスしている場合は送信します。注: 同じラジオ ボタンを何度もクリックすると、フォームのフォーカスが失われます。私はそれに取り組んでいますが、参加させていただければ幸いです=）

これが私のフォームの例です。自由に遊んでください =)

HTML

注: アクション URL を削除しました

<form action="" method="post" id="Form_filters" >

<br/><ul id="locations"><li id="title"><b>Location</b></li><br/><li><label class="location-checkbox ">
                    <input value="12"  name="locations[]" type="checkbox" > Africa - 12                 <span></span>
                </label>
                            </li>
            <li>                <label class="location-checkbox ">
                    <input value="16"  checked='checked' name="locations[]" type="checkbox" > Australasia - 16                  <span></span>
                </label>
                            </li>
            <li>                <label class="location-checkbox child-location">
                    <input class="australasia" value="29"  checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> New Zealand - 29                 <span></span>

                </label>
                            </li>
            <li>                <label class="location-checkbox child-location">
                    <input class="australasia" value="24"  checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> Queensland - 24                  <span></span>

                </label>
                            </li>
            <li>                <label class="location-checkbox child-location">
                    <input class="australasia" value="21"  checked='checked' name="locations[]" type="checkbox" style="margin-left:50px;"> Western Australia - 21                   <span></span>

                </label>
                            </li>
            <li>                <label class="location-checkbox ">
                    <input value="9"  name="locations[]" type="checkbox" > UK - 9                   <span></span>
                </label>
                            </li>
            <li><label class="location-checkbox child-location">
                    <input class="uk" value="18"  name="locations[]" type="checkbox" style="margin-left:50px;"> Scotland - 18                   <span></span>
                </label>
                            </li>
            <li><label class="location-checkbox child-location">
                    <input class="uk" value="19"  name="locations[]" type="checkbox" style="margin-left:50px;"> Wales - 19                  <span></span>
                </label>
                            </li>
            <br/></ul><ul id="tof" ><li id="title"><b>Type of role</b></li><li>
                <label  class="search-radio-button ">
                    <input value="58" name="tors[]" type="radio" class="radio tor-radio-button"> Freelance - 58                 <span></span>   
                </label>
            </li>
                        <li>
                <label  class="search-radio-button ">
                    <input value="56" name="tors[]" type="radio" class="radio tor-radio-button"> Full-time - 56                 <span></span>   
                </label>
            </li>
                        <li>
                <label  class="search-radio-button ">
                    <input value="59" name="tors[]" type="radio" class="radio tor-radio-button"> Internship - 59                    <span></span>   
                </label>
            </li>
                        <li>
                <label  class="search-radio-button ">
                    <input value="57" name="tors[]" type="radio" class="radio tor-radio-button"> Part-time - 57                 <span></span>   
                </label>
            </li>
            <br/>
        <input type="submit" id="searchsubmit" value="Submit button" />
</form>

注: すべての CSS タグを削除した場合、Enter キーを押すとフォームが送信されます。

CSS

    ul, menu, dir {
list-style-type: none;
}

/* LOCATIONS CUSTOM CHECKBOXES */
/* hide real checkboxes */
.location-checkbox input {
    display: none;
}

/* add new checkboxes */
.location-checkbox span {
    width: 15px;
    height: 15px;
    float: left;
    background: url("http://csscheckbox.com/checkboxes/lite-green-check.png");
    background-repeat: no-repeat;
}

.location-checkbox input:checked + span {
    background-position:0px -15px;
}

/* add margin for child cat */
.location-checkbox.child-location span {
    margin-left: 50px;
}

/* add margin for label form */
ul#locations label {
    padding-left: 10px;
}


/* RADIO BUTTON CUSTOM IMAGES */
/* hide real checkboxes */
.search-radio-button  input {
    display: none;
}

/* add new checkboxes */
.search-radio-button  span {
    width: 20px;
    height: 20px;
    float: left;
    background: url("http://satafx.com/img/radio.gif");
    background-repeat: no-repeat;
}

.search-radio-button  input:checked + span {
    background-position:0px -20px;
}

/* Add a min-height on the li to float the content to the left */

ul#sectors li, ul#tof li{
    min-height:20px;
}

ul#sectors li label, ul#tof li label {
    margin-left:10px;
}
4

3 に答える 3

0

または、ユーザーが Enter キーを押したときにイベントを処理し、そのイベントでフォームを送信することもできます。ユーザーが Enter キーを押したときにイベントを処理する JS コードを次に示します。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter ! On this event you can submit your form');
    }
});
于 2013-10-23T11:25:46.287 に答える