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>

我想在用户按下Enter时同时触发表单上的提交事件，同时专注于一个元素（包含在<form>标签中的输入元素的标准行为），但是当我按下回车时，没有任何反应（ fiddle）。如果我删除除一个输入元素之外的所有元素，代码就可以工作，并且我得到了按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。此外，浏览器默认情况下在用户按Enter键时提交，因此请修复此问题，您不需要使用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

添加元素 <input type="submit" name="xx" value="submit" /> 它会自动触发提交行为。
您还可以使用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是输入类型提交btn的ID。

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

5 个答案: