按回车键时表单未提交

你有两个选择:

1. 为enter按钮创建一个事件处理程序并将其添加到绑定中。
2. 使用 <input type=submit> 在某处的表单中,这就是获得您所追求的自动回车键行为的原因。

我在同一个问题上苦苦挣扎;我的一个表单在文本字段中按“回车”键时提交,没有问题;另一个,类似的,在同一页上的表单在我的生命中根本不会提交。

两个字段都没有submit按钮,也没有使用javascript进行任何提交。

我发现,当表单中只有一个文本字段时,在文本字段中按“回车”键将自动提交;但如果有多个(常规(即单行)文本输入)字段,则它不会执行任何操作,除非还有某种“提交”按钮。

显然这是 HTML 2.0 specification :

当表单中只有一个单行文本输入字段时,用户代理应接受在该字段中输入作为提交表单的请求。

An old, but apparently still valid, and interesting, further discussion here .

... 很明显,这是一种提交简单查询的便捷方式,但在复杂的表单上,可以减少在尝试填写时过早提交查询的风险。许多浏览器实现者(例如Netscape、Opera、各种版本的Lynx,…)都遵循了这个建议,尽管它的解释似乎略有不同。

我做了 a JSFiddle to demonstrate . 据我所知(只是懒洋洋地用Chrome测试),如果只有一个文本字段,或者有一个提交按钮,即使它是隐藏的,表单也会在“回车”时提交。

(编辑:我后来发现,如果有其他输入字段不是常规的单行文本输入,它似乎也可以工作。。。e、 例如,文本区域、选择等——感谢@user3292788提供的信息。更新了JSFiddle以反映这一点)。

<h2>Form with one text field only, no submit button</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields, no submit button</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>



<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>


<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
  <div>
    <label for="search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">

  <p><input type="text" ></p>

  <textarea name="" id="" cols="30" rows="10"></textarea>

  <p>
    <select name="" id="">
      <option value="">Value</option>
    </select>
   </p>
</form>

它也可以来自javascript绑定到 <button> 以你的形式。例如,如果你有

<button id='button'>Reset</button>
<span id="textToReset">some info</span>

<script type="text/javascript">
$('#button').bind('click', function(){  
    $('#textToReset').text('');     
    return false;
})
</script>

您的回车键将被 return false 并且您的表单不会在Enter键下提交。正确的方法是指定 <按钮> 充当按钮。这种方式:

<button id='button' type="button">Reset</button>

然后放下 返回false 你这样做是为了防止那个按钮提交表单。;-)

为了学习, <按钮> 默认情况下,类型为“提交”。如果希望它们作为窗体的控件,则必须指定 type="button" 或 type="reset" See w3.org about it

如果您有正确的输入提交按钮,但在该按钮上使用(单击)事件,则在输入时不会触发它。显然,它将提交表单,但不会触发按钮上的单击事件。将功能放到表单本身和它的submit事件将使其工作。

万一有人和我犯同样的错误,也来这里寻找答案:

如果你有 二 (或更多)提交按钮 ^1个 在您的表单中,按enter只会触发第一次提交,而不会触发第二次提交。

^1个 正如@paul daoust在评论@g-d-d-c的答案时所指出的:两者 <input type=submit> 和 <button type=submit> 将用作提交按钮