表格不会使用Chrome或Firefox中的Enter键提交

Question

我对此感到愚蠢但是当您按Enter键时提交表单不是正常的Web浏览器行为吗？这可能有什么问题？我已经检查过,通过js禁用测试,它不是任何javascript干扰.它在IE中工作.我宁愿让提交按钮成为一个<button>而不是一个<input>,但我认为输入将有更好的工作机会.

<form role="search" method="get" class="search-form form-inline" action="http://local.sos/">
   <div class="input-group">
     <span class="input-group-btn">
       <button class="btn" disabled=""><i class="icon-search"></i></button>
     </span>
     <input type="search" value="" name="s" class="search-field form-control" placeholder="Search">
     <span class="input-group-btn">
       <input type="submit" class="search-submit btn"><i class="icon-arrowright"></i>    </input>
     </span>   
   </div>
</form>

Answer 1

您依赖于非显而易见的行为,即在表单上的文本字段中按"输入"将自动提交表单,但前提是表单中只有一个文本字段. 我有一个类似的问题,只是没有尝试使用disabled属性...

显然,这是HTML 2.0规范的一部分:

如果表单中只有一个单行文本输入字段,则用户代理应接受该字段中的Enter作为提交表单的请求.

这是一个陈旧但显然仍然有效且有趣的进一步讨论.

...显然是一种提交简单查询的便捷方式,但是在复杂的形式上降低风险,在尝试填写它时过早地提交它.许多浏览器实现者(例如Netscape,Opera,各种版本的Lynx,. ..)遵循这个建议,虽然似乎有不同的解释.

但是,如果不只是单个文本字段,您可能需要某种提交按钮,即使您不想在表单上看到它并使用CSS来隐藏它 - (display: none, etc)- 它仍然应该(当然,这完全取决于浏览器决定如何实现,但从我能说的内容来看似乎是标准的.)

我做了一个JSFiddle来演示.据我所知(懒惰只是用Chrome测试),如果只有一个文本字段,或者如果有一个提交按钮,表单将在"Enter"上提交,即使它是隐藏的.

<h2>Form with one text field only</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</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="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>

另请参阅 输入时表单未提交