2

我创建了一个运行良好的表单。但是，在自定义复选框图像后，我无法通过按“输入”键发送表单。任何帮助，将不胜感激。

编辑 感谢您的回答，非常感谢。但是，在我的页面上，我有多种形式（当然......）

过程：我需要检测焦点形式。如果我们关注#Form_filters 搜索表单，我会发送它。注意：在同一个单选按钮上单击多个按钮后，我失去了表单焦点。我正在努力，但我很高兴让你加入 =)

这是我的表格示例，请随意使用它=）

HTML

注意：我删除了操作网址

<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 标签，按回车键将发送表单。

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

3

在窗口上使用 keyup 事件并检查按下的键是否输入。

$(window).keyup(function(e){

        if(e.which == 13)
        {
            alert("Submitted");
            //your logic goes here.
        }
    });
于 2013-10-23T11:10:46.913 回答
0

我只是在您的代码底部添加这两行，它工作正常：

$('#searchsubmit').focus()
$('*').change(function(){$('#searchsubmit').focus();});

检查这个： jsfiddle

于 2013-10-23T11:13:50.697 回答
0

或者，您可以在用户按下回车键并在该事件上汇总表单时处理该事件！这是用户按下回车键时处理事件的 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 回答