表时，才会有一个输入

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>标签中），但是当我按下回车键时，什么也没有发生（fiddle）。如果我删除除输入元素之外的所有元素，代码将正常工作，并获得按Enter键并触发表单提交（fiddle）的预期行为。

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

注：我已经在Safari 5.1，Chrome浏览器17，火狐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黑客入侵。

Answer 2

它是浏览器自动提交简单表单（如搜索表单）的默认行为，这就是为什么当只有一个输入时它正在工作。我相信如果你想在复杂的表单上使用这个功能，你需要使用javascript。如果你不反对使用jQuery，以下应该做的伎俩。

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

Answer 3

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

肖恩。

Answer 4

自己试了一下后，我简直不敢相信。

看起来是这样的问题：

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

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。