logo标签列表

在Chrome或Firefox中使用回车键提交表单无效

htmlforms
4
我感觉这很愚蠢，但是当您按下“Enter”键时提交表单不是正常的网页浏览器行为吗？这其中可能有什么问题吗？我已经通过禁用JS测试确认它并不会受到任何干扰。在IE中可以正常工作。我更喜欢将提交按钮设置为<button>而不是<input>，但我认为<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>
可能与禁用的按钮有关。我会调查一下。 - guest
1
https://dev59.com/F3NA5IYBdhLWcg3whuZ_#925387 建议按下回车键会尝试使用第一个按钮，但该按钮已被禁用。 - guest
嗯，是的。看起来就是这样了。我把它从<button>改成了<b>，现在它可以工作了。:P 但这很愚蠢。为什么它会关注普通按钮？难道不应该寻找提交按钮吗？ - Moss
3个回答
11
你依赖于非明显的行为，即在表单中的文本字段上按“Enter”将自动提交表单，但仅当表单中只有一个文本字段时才会这样做。 我曾经遇到过类似的问题，只是没有尝试使用disabled属性...
显然，这是HTML 2.0规范的一部分：

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

这里有一个旧的、但显然仍然有效且有趣的进一步讨论。

... 显然是一种方便的提交简单查询的方式，但在填写复杂表单时减少了意外提交表单的风险。 许多浏览器实现者（例如Netscape、Opera、各种版本的Lynx等）都遵循了这个建议，尽管似乎有稍微不同的解释。

如果表单中不止一个文本字段，你可能需要一个提交按钮，即使你不想在表单上看到它并使用CSS隐藏它（display: none等），它仍然应该工作。(当然，这完全取决于浏览器如何实现，但从我所知道的来看，这是标准做法。) 我做了一个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>

另请参阅按回车键时表单未提交。

0

这似乎是与“disabled”有关的问题。在 Chrome 和 Firefox 中，按钮/提交类型的输入字段在 form< 元素下具有“禁用”，不允许通过按“Enter”键来提交表单，但在 IE 中可以提交表单。

以下代码在所有浏览器中都得到验证：

<form action="http://google.co.in">
    <input type="text" name="s" />
    <input type="submit" disabled=""/>
</form>
<form action="http://google.co.in"> <input type="text" name="s" /> <input type="submit" disabled=""/> </form> - Nagaraj Kalpanahalli
0
如果按钮没有 type='button' 属性，它将被用作提交按钮，因此您在HTML中有两个提交按钮。 如果按下回车键，它将使用第一个提交按钮，如果其已禁用，则无法使用。 因此，您可以将 type='button' 添加到按钮。
如果按钮没有'type='button''属性，它将被用作提交。因此，在HTML中有两个提交按钮，如果按下回车键，它将使用第一个提交，如果禁用，则不起作用。因此，您可以向按钮添加type='button'。 - Ava Ma
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接