web-dev-qa-db-ja.com

JQueryで 'Enter'のフォームを送信しますか？

HTML/jQueryを使用しているAIRプロジェクトでは、電子メールテキストフィールド、パスワードフィールド、および送信ボタンという、漠然としたログインフォームがあります。フォームでEnterキーを押すと、フォームの内容全体が消えますが、フォームは送信されません。これがWebkitの問題であるかどうか（Adobe AIRはHTMLのためにWebkitを使用します）、または私が物事をまとめたかどうかを誰かが知っていますか？

私は試した：

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

しかし、それは清算行動を止めたり、フォームを提出したりすることもありませんでした。フォームに関連付けられたアクションはありません - それが問題になる可能性がありますか？アクションにJavaScript機能を追加できますか？

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

注：あなたはbendeweyの答えを受け入れましたが、それはe.preventDefault（）の説明と間違っています。このスタックオーバーフローの答えをチェックしてください： event.preventDefault（）vs falseを返します

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

361
NoBrainer

ジェイソンコーエンが述べたように偽を返すことに加えて。あなたも防ぐ必要があるかもしれませんデフォルト

e.preventDefault();
173
bendewey

それが役立つかどうかわからないが、フォームを直接送信する代わりに、送信ボタンのクリックをシミュレートすることを試みることができます。私は本番環境で次のコードを持っています、そしてそれはうまく働きます：

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

注： jQuery（ '＃submit'）。focus（） enterキーを押すとボタンがアニメーション化されます。

78
karim79

キーストロークが続行されないようにするには、falseを返します。

61
Jason Cohen

Enterキーをフックしてテストしなければならない理由はありますか？

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

<input type="submit" />

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

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

29
Zack The Human

これをJQueryプラグインとして実行する方法は次のとおりです（機能を再利用したい場合）。

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

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

今、あなたがこのタイプの機能で装飾したいならば、それはこれと同じくらい簡単です：

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

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

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

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

_ 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()
    });
});

これはFirefox 4.0とjQuery 1.4.3で、2011-04-13の時点で働いています

12
GERV

またアクセシビリティを維持するために、あなたはあなたのキーコードを決定するためにこれを使うべきです：

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

if (c == 13) ...
4
Logan Serman

これは私のコードです：

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
4
Hoàng Vũ Tgtt

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

例えば：

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

今使っています

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

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

2
faebser

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
mghhgm

私は今日、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'が欠落していますが、キーダウンとキーアップ登録コード '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
Piemol