ボタンをアクティブにする代わりに、HTMLフォームのEnterキーを送信する

単一のsubmit入力だけでなく、さまざまなbutton要素を持つHTMLフォームがあります。ユーザーが「Enter」キーを押すと、実際にフォームが送信されると思いますが、代わりに（少なくともChrome 15内では）最初のトリガーがトリガーされていることがわかりbuttonます（HTMLではsubmit入力よりも早く発生するため）、 私は推測する）。

一般に、ブラウザに特定のsubmit入力を優先させることはできないことは知っていますがsubmit、button要素よりも入力を優先すると本当に思っていました。これを機能させるためにHTMLに微調整を加えることはできますか、それとも何らかのJavascriptアプローチを採用する必要がありますか？

HTMLの大まかなモックアップは次のとおりです。

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

デフォルトの送信ボタンまたは入力を選択するのにJavaScriptは必要ありません。でマークアップするだけtype="submit"で、他のボタンはでマークアップしますtype="button"。あなたの例では：

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

jQueryを使用できます。

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

これを試してみてください。たとえば、Enterキーが押された場合は、このようにキャプチャできます。先日、HTMLボタンで選択を指定して回答を作成しました。これが役立つかどうかを確認してください。

たとえば、フォーム名を指定すると、フォームにyourFormName集中しなくてもフォームを送信できるようになります。

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}

$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});

私はこれで問題にぶつかった。私はをに変更するinputことからの脱落でした、buttonそして私はひどく書かれた/>タグターミネーターを持っていました：

だから私は持っていた：

<button name="submit_login" type="submit" class="login" />Login</button>

そしてそれを次のように修正しました：

<button name="submit_login" type="submit" class="login">Login</button>

今では魅力のように機能し、常に迷惑な小さなもの... HTH

送信ボタンが1つしかない（またはこのソリューションでは1つでもない可能性がある）場合、同じページの複数のフォームで機能するjQueryベースのソリューションを次に示します...

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

ChromeとFirefoxとIE10の両方でこれを回転させました。

上記のように、type = "button"、 "reset"、 "submit"などでマークアップして、正しくカスケードされ、正しいボタンが選択されるようにします。

おそらく、それらすべてを同じ形式に設定することもできます（つまり、私にとってはすべてがうまくいきました）