web-dev-qa-db-ja.com

ボタンをアクティブ化する代わりに、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>
jqueryhtmlforms
68
andygeers

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;
        }
    });
});
30
Ofir Farchy

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

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

これを試してください。たとえば、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();
  }
}
4
david

これで問題が発生しました。私はinputをbuttonに変更することから抜け落ちていましたが、間違って書かれた/>タグターミネーターがありました

だから私は持っていた：

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

そして、ちょうどそれを修正しました：

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

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

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

送信ボタンが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>
2
Darren

私はこれをChromeとFirefoxおよびIE10の両方で旋回させました。

前述のように、type = "button"、 "reset"、 "submit"などでマークアップしていることを確認して、正しくカスケードして正しいボタンを選択するようにします。

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

1
Flanamacca