フォームは一つだけ入力

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>タグで囲まれた入力要素の動作）、Enterキーを押すと何も起こりません（fiddle）。 1つの入力要素を除くすべての要素を削除すると、コードが機能し、Enterキーを押してフォーム送信（fiddle）をトリガーするという予想される動作が得られます。

複数のフォームがある最初の例では、希望の動作（フォームを送信するEnterキーを押す）を取得するにはどうすればよいですか？

注：私はサファリ5.1でこの同じ動作を発見した、クロム17、Firefoxの9、およびIE 9が

明確化：私はちょうどそれをいくつかのJavascriptを投げることができます知っているが、私がしたいですマークアップだけでそれを解決してください。

更新：あなたが参考にして指摘してくれたように、私は<input type=submit>を追加して目的の動作を得ることができます。問題は、ユーザーに送信ボタンが表示されないようにすることです。リターンを押したときにブラウザが提出しませんので、私はちょうど、そのdisplaynoneに設定することはできませんので、私はQUnitから借用し、次のように設定します。

HTML：

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

CSS：

を

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

Answer 1

私はフォームが送信ボタンなしで送信したくないことに気付きました。この問題は、送信ボタンを追加するだけで解決されます。デモの詳細はfiddleを参照してください。さらに、ブラウザはデフォルトでenterキーを押したときにサブミットするので、それを修正すればjavascriptトリガは必要ありません。

EDIT： あなたはそれがスタイリングの不備だという理由だけで、<button type="submit">を検討<input type="submit">を使用したくない場合は、それはまた、トリックを行う必要があります。送信ボタンをまったく必要としない場合は、CSSのハックを守ってください。

Answer 2

ブラウザでは、検索語などの単純なフォームが自動的に送信されるため、入力が1つしかない場合に動作します。複雑なフォームでこの機能を使用するには、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

はこの1つを試してみてください。これは問題であるように

が見えます。私は

<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でチャットシステムのためにTinyMCEのと私のテキストエリアにこれを使用しています。