jQueryを使用して「Enter」でフォームを送信しますか?


427

HTML / jQueryを使用しているAIRプロジェクトで、沼地の標準ログインフォーム-電子メールテキストフィールド、パスワードフィールド、および送信ボタンを持っています。フォームでEnterキーを押すと、フォーム全体の内容が消えますが、フォームは送信されません。これがWebkitの問題なのか(Adobe AIRはWebkit for HTMLを使用しているのか)、または私がまとめたものがあるのか​​、誰か知っていますか?

私は試した:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

しかし、それはどちらも清算行動を止めず、フォームを提出しませんでした。フォームに関連付けられているアクションはありません-それが問題なのでしょうか?アクションにJavaScript関数を含めることはできますか?


3
<input ...に本当にclass = "input"属性がありますか?$( 'input')。keypress ...である必要があるようです
NexusRex

クラスはCMSによってプログラムで生成されます。ただし、それ以外の場合、$( 'input')にスコープを設定すると、動作が必要かどうかにかかわらず、ページ上のすべての入力に影響します。申し訳ありませんが、あなたの感性を害します。
hollenbeck

15
感度は最低でも気になりません。それは問題につながる見落としであるかもしれないと思っただけです。続ける。
NexusRex

1
参考までに:あなたの受け入れられた答えは完全に正確ではありません。以下の私の答えを参照してください。
NoBrainer 2012

回答:


399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

このstackoverflowの答えを確認してください: event.preventDefault()vs. return false

基本的に、 "return false"はとe.preventDefaultと同じe.stopPropagation()です。


3
それらは同じではないことに注意してください。IE8にはe.preventDefaultがありません。IE8の場合、event.returnValue = falseを使用します。
mbokil 2013

8
@mbokil jQueryを使用する場合を除き、IE8でも同じです。およびIE7。そしてIE6。
ケビンB

最初に入力フィールドに入力する場合は、「return false;」を入力します。ifステートメント内。
Juni Brosas、2015年

173

Jason Cohenが述べたようにfalseを返すことに加えて。あなたも防ぐ必要があるかもしれませんDefault

e.preventDefault();

13
@NoBrainerが言ったように、これは間違っていreturn falseます。jQueryによって管理されているイベントでは、e.preventDefault()を自動的に呼び出します
Riccardo Galli

83

それが役立つかどうかはわかりませんが、フォームを直接送信する代わりに、送信ボタンのクリックをシミュレートしてみることができます。次のコードを本番環境で使用していますが、正常に機能します。

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

注:jQuery( '#submit')。focus()は、Enterキーが押されたときにボタンをアニメーション化します。


2
うまく機能しますが、「return false」を追加する必要がありました。フォームの二重送信を防ぐため。
code90

働く| トリガー、センドキーなどについて話しているこのような多くの結果を見てください、しかし、それは私にとって唯一の働きであり、実際にボタンのクリックを送信します。submit()ではありません。つまり、秘訣は、フォーカスのあるfocus()。click()関数でした。ありがとうございました。
m3nda 2014

動作しますが、このコードを以下に配置する必要がありました:$(document).ready(function(){...
shasi kanth


30

Enterキーをフックしてテストする必要がある理由はありますか?

単に追加できませんでしたか

<input type="submit" /> 

あなたのフォームに入力し、エンターが押されたときに自然に送信されますか?必要にonsubmit応じて、フォームのアクションをフックして、そこから検証関数を呼び出すこともできます...

を使用しonsubmitてフォームが送信されているかどうかを確認することもできますが、を呼び出しても機能しませんform.submit()


1
完全に同意する。私の好みは常にブラウザのネイティブ機能を使用することです。..むしろさらにアップ適当に組みあわせたスクリプトを追加するよりも(タイプ=の入力は、キーを押して入力をネイティブに応答を提出)
アーロン・

1
問題は、あなたがajaxのことをやっていて、サーバーへの実際のポストバックがなければ、ユーザーが期待するとおりにUIを動作させたい場合はどうなりますか?
devlord、

確かに……全部見落としていたreturn false;
devlord

14

これをJQueryプラグインとして実行する方法を次に示します(機能を再利用する場合)。

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

<input>このタイプの機能で要素を装飾したい場合は、次のように簡単です。

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

12

またonsubmit="return false"、ページのフォームコードに単純に追加して、デフォルトの動作を防止することもできます。

次に、JavaScriptファイルでjQueryを使用して、フォームのイベントを関数にフック(.bindまたは.live)しsubmitます。

これが役立つサンプルコードです:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

JavaScript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

これは、2011年4月13日現在、Firefox 4.0およびjQuery 1.4.3で動作しています。


Chromeでは機能しません。とにかく提出します。
MarceloAgimóvel

5

これは私のコードです:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

4

また、アクセシビリティを維持するために、これを使用してキーコードを決定する必要があります。

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

3

簡単に実装できるように追加するだけです。単純にフォームを作成し、送信ボタンを非表示にすることができます。

例えば:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

@cebirciとあなたのクロムはどのバージョンですか?ラップトップからPCまでテストしましたが、コードは問題なく動作します。私の答えをマークダウンする前に、最新のクロムをダウンロードしてみてください。
Joem Maranan 2013年

2

今使っています

$("form").submit(function(event){
...
}

最初に、送信ボタンにイベントハンドラーを追加すると、エラーが発生しました。


1

今日、Enterキーを押してもkeypressイベントが発生しないことを知りました。代わりにkeydown()またはkeyup()に切り替えることをお勧めします。

私のテストスクリプト:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

キーボードで「A Enter B」と入力したときのコンソールの出力:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

2番目のシーケンスでは「keypress」が欠落していますが、keydownおよびkeyupレジスタコード「13」が押された/離されたことがわかります。関数keypress()に関するjQueryドキュメントに従って:

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Server 2012 R2のIE11およびFF61でテスト済み


0

HTMLコード:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

Jsコード:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

1
複数の質問に同じ回答を投稿しないでください。良い答えを1つ投稿してから、投票またはフラグを立てて、他の質問を重複として閉じます。質問が重複していない場合は、質問に対する回答を調整してください。
Paul Roub、2017

@PaulRoub私の答えは別のものといくつかの違いがあります。
mghhgm 2017

どのようにこの答えは異なり、このまたはこれ
Paul Roub、2017

@PaulRoub私はこの問題を抱えており、まずこれをgoogleで検索します。そのページでは、この問題について話しますが、単純ではありません。私が最良の答えを見つけたとき、私はこれを共有することに決めました。そのページは、これを検索するときにユーザーを助けるために話します。同様のスタックオーバーフローページで私の答えを見てください。
mghhgm 2017

1
この答えは、すべての質問に関連していない
ゾルタンスーレーパゴダ

-4

これを試して:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

9
これは、jqueryとバニラJavaScriptを不快な方法で混ぜ合わせており、混乱を招く本当に奇妙なキャストが含まれています
moopet
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.