Question

我有以下表格：

<form action="/web/projects/add" id="EventAddForm" method="post" accept-charset="utf-8">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> 
    <div class="input text">
        <label for="AddressSearch">Search address</label>
        <input name="adress_search" type="text" id="AddressSearch"/>
    </div>
    <div class="input text required">
        <label for="EventAddress">Address</label>
        <input name="data[Event][address]" type="text" id="EventAddress"/>
    </div>
    <div class="input text required">
        <label for="EventPostNr">Post nr</label>
        <input name="data[Event][post_nr]" type="text" id="EventPostNr"/>
    </div>
    <div class="input text required">
        <label for="EventCity">City</label>
        <input name="data[Event][city]" type="text" id="EventCity"/>
    </div>
    <div class="submit">
        <input  type="submit" value="Save"/>
    </div>
</form>

前面提到的字段用于通过谷歌地图选择自动建议的地址，我省略了该代码以提高可读性，但是当出现autosuggest下拉列表时会出现问题。如果用户通过键盘导航到其中一个建议并按enter，则会提交整个表单。我有以下功能来防止表单在鼠标单击时下载：

jQuery('#EventAddForm').submit(function( event ) {
  if ( $("#AddressSearch").is(":focus") ||
    $("#EventPostNr").is(":focus") ||
    $("#EventCity").is(":focus"))
    event.preventDefault();
 });

但我想要做的是阻止enter点击上的表单。

我缺乏jQuery的一些知识，只是无法让它运行，所以非常感谢任何帮助或指导。

Answer 1

如果字段发生变化，指定所有字段并不是一个好主意。

而是使用更通用的选择器。

jQuery('#EventAddForm').submit(function( event ) {
    if ($(this).find('input:text:focus').length) event.preventDefault();
});

http://jsfiddle.net/KpXD3/

Answer 2

尝试将此条件添加到if块：

jQuery('#EventAddForm').submit(function( event ) {
    if ( $("#AddressSearch").is(":focus") ||
      $("#EventPostNr").is(":focus") ||
      $("#EventCity").is(":focus") ||
      event.which == 13) //13 is code for enter key
      event.preventDefault();
});

防止表单提交自动建议

2 个答案: