表時，纔會有一個輸入

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。