表单仅在有一个输入时提交

Question

我有一个围绕多个输入的 <form> 元素：

<form>
  <div class="tr" id="widget306">
    <div class="td col-grab">

        <button type="button" class="button grab formwidget" id="widget611">m</button>

    </div>

    <div class="td col-name">

        <input type="text" name="name" value="target volume profile 1" id="widget607" class="formwidget textbox">

    </div>
    <!-- ... etc ... -->
  </div>
</form>

当用户在关注一个元素时按下回车键时，我想在表单上触发一个提交事件（包装在<form> 标签中的输入元素的标准行为），但是当我按下回车键时，什么也没有发生（@987654321 @)。如果我删除了除一个输入元素之外的所有元素，则代码可以正常工作，并且我会得到按 Enter 键并触发表单提交的预期行为 (fiddle)。

在我有多个表单的第一个示例中，如何获得所需的行为（按 Enter 提交表单）？

注意：我在 Safari 5.1、Chrome 17、Firefox 9 和 IE 9 中发现了同样的行为。

澄清：我知道我可以扔一些 Javascript，但我想只用标记来解决它。

更新：正如你们中的一些人有帮助地指出的那样，我可以通过添加 <input type=submit> 来获得所需的行为。问题是我不希望用户看到提交按钮。我不能只将它的display 设置为none，因为当按下返回时浏览器不会提交，所以我从 QUnit 中借用并设置以下内容：

HTML：

<input type=submit class=hide-me />

CSS：

.hide-me {
  position: absolute;
  left: -10000px;
  top: -10000px;
}

Answer 1

我注意到表单不喜欢在没有提交按钮的情况下提交。只需添加一个提交按钮即可解决此问题。请参阅此fiddle 进行演示。此外，默认情况下，浏览器会在用户按下回车时提交，因此请修复该问题，您将不需要 javascript 触发器来触发它。

编辑： 如果您不想仅仅因为它的样式缺陷而使用<input type="submit">，请考虑使用<button type="submit">，它也应该可以解决问题。如果您根本不想要提交按钮，请坚持使用 CSS hack。

Answer 2

我自己试过之后也不敢相信。

看起来是这个问题：

Why does forms with single input field submit upon pressing enter key in input

Answer 3

浏览器自动提交简单表单（如搜索表单）是默认行为，这就是为什么它在只有一个输入时起作用的原因。我相信如果您希望在复杂表单上使用此功能，您将需要使用 javascript。如果您不反对使用 jQuery，那么以下内容应该可以解决问题。

$(function(){ 
     $("#formid input").keypress(function(event){
         if (event.which = 13){
             $("#formid").submit();
         }
     }
}

Answer 4

1. 添加元素 <input type="submit" name="xx" value="submit" /> 它会自动触发提交行为。
2. 您也可以使用 jQuery 来处理按下事件。

肖恩。

Answer 5

试试这个。我在我的 textarea 上使用它和 tinymce 作为聊天系统

<script>
function getKeystroke(e)
{
  var keynum;


  keynum = (window.event) ? event.keyCode : e.keyCode;



  switch(keynum)
  {
     case 13:  /* enter key */
        document.getElementById("s_say").click();
        document.getElementById("s_message").focus();

        break;
  }

}
</script>

s_say是输入类型submit btn的ID。