入力時にjqueryがフォーム送信を無効にする


207

ページに次のJavaScriptがあり、動作していないようです。

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

入力時のフォームの送信を無効にしたいのですが、さらに良いことに、私のajaxフォームの送信を呼び出します。どちらの解決策でも問題ありませんが、上記のコードでフォームの送信が妨げられることはありません。


3
:ここでは、単純なHTMLのみのソリューションですstackoverflow.com/a/51507806/337934
SAMB

回答:


420

keyCodeキャッチされない場合は、キャッチしwhichます。

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

編集:それを逃した、それのkeyup代わりに使用することをお勧めしますkeypress

編集2:Firefoxの一部の新しいバージョンでは、フォームの送信が禁止されていないため、フォームにkeypressイベントを追加する方が安全です。また、イベントをフォーム「name」にバインドするだけでは機能せず(もう?)、フォームIDにのみ機能します。したがって、コード例を適切に変更することで、これをより明確にしました。

EDIT 3:変更bind()on()


15
jQueryはそれをe.whichに正規化するため、をテストする必要はありませんがe.keyCode、この問題の最も可能性の高い原因は+1です。
Bojangles 2012年

4
return false;これが必要ですか?e.preventDefault();エノウグのようです
クロミゴ2016

10
重要!このソリューションブロックは、textareaで中断します。
ドイツのホフロフ2016

4
問題は、同じフォームにテキストボックスがある場合、テキストボックスにEnter(新しい行を作成する)を追加できないことです。
Tikky

3
keyCode === 13 && !$(e.target).is('textarea')
teran 2017

62

通常、フォームはEnter、入力要素にフォーカスがあるときに送信されます。

フォーム内の入力要素のEnterキー(コード13)を無効にすることができます:

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

デモ: http : //jsfiddle.net/bnx96/325/


iOS Goボタンは、カスタムオートコンプリート入力フィールドでの問題でした。これで解決しました。
ディランヴァレード2013

11
これにより、Enterキーtextareasが同じフォーム内で使用されなくなります。の$("form input")代わりに使用$("form :input")すると、それを修正するようです。デモ:jsfiddle.net/bnx96/279
shaneparsons

43

さらに短い:

$('myform').submit(function() {
  return false;
});

35
しかし、これはユーザーのクリックも防ぎますか?
haibuihoang 2014年

5
@haibuihoangはい、これによりフォームの送信が無効になります。
トム

7
function(e) {e.preventDefault();}イベントハンドラーの戻り値は廃止予定なので使用する必要があります:stackoverflow.com/a/20045473/601386
flu

6
@ user1111929これは問題なく動作しますが、質問EnterSubmitボタンによるフォーム送信の無効化についてではなく、それについてのみ尋ねられるため、最高の答えにはなりません。
daveslab 2015

onClickフォームの送信を保持したいが、Enterキーを押したときに送信を無効にしたい場合の一般的な状況は、jQuery イベントを使用してフォームを検証し、それでもjQueryを使用して送信する場合です。つまり、javascript / jQuery経由でのみ送信したい場合があります。このソリューションでAJAXを使用することはできますが、submitメソッドの基本機能は無効になります。
JRad the Bad


14
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

このソリューションは、Webサイト上のすべてのフォーム(およびajaxで挿入されたフォーム)で機能し、入力テキストの入力のみを防止します。それをドキュメント対応関数に配置し、この問題を一生忘れてください。


9

上記のほとんどの回答は、ユーザーがtextareaフィールドに新しい行を追加できないようにします。これが避けたいものである場合は、現在フォーカスされている要素を確認することで、この特定のケースを除外できます。

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

8

Enterキーのすべてのキーストロークをキャプチャしてテストしなければならないというやりすぎは本当に私を悩ませます。そのため、私の解決策は次のブラウザーの動作に依存しています。

Enterキーを押すと、送信ボタンでクリックイベントがトリガーされます(IE11、Chrome 38、FF 31でテスト済み) **(参照:http : //mattsnider.com/how-forms-submit-when-pressing-enter/

したがって、私の解決策は、標準の送信ボタン(つまり<input type="submit">)を削除して、Enterキーを押したときに魔法のようにクリックする送信ボタンがないため、上記の動作が失敗するようにすることです。代わりに、通常のボタンでjQueryクリックハンドラーを使用して、jQueryの.submit()メソッドを介してフォームを送信します。

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

デモ:http : //codepen.io/anon/pen/fxeyv?editors=101

**フォームの入力フィールドが1つだけで、そのフィールドが「テキスト」入力の場合、この動作は適用されません。この場合、HTMLマークアップ(検索フィールドなど)に送信ボタンがない場合でも、Enterキーを押すとフォームが送信されます。これは、90年代以降の標準的なブラウザの動作です。


「フォームには入力フィールドが1つしかなく、そのフィールドは「テキスト」入力である」ため、「フォームはEnterキーで送信されます」というカウンターに非表示の入力ボックスを追加しました。
Luo Jiong Hui、

6

EnterおよびSubmitボタンの送信を無効にしたいだけの場合も、フォームのonsubmitイベントを使用します。

<form onsubmit="return false;">

"return false"を、必要なことをすべて実行するJS関数の呼び出しに置き換え、最後のステップとしてフォームを送信することもできます。


1
これにより、送信ボタンのクリックを含むすべてのフォーム送信が無効になります。
Nick 14

100%ではない...定期的にキーを送信する... jqueryを使用して防止する
KingRider

(上記の警告を使用して)良い代替回答。なぜなら、...まあ、これで十分な場合もあります。
emilys

これがまさに私が状況に必要なものでした。ありがとう
shababhsiddique 2018年

4

純粋なJavascriptでこれを完全に行うことができます。シンプルで、ライブラリは必要ありません。ここに同様のトピックの詳細な回答があります: フォームのEnterキーを無効にする

要するに、これがコードです:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

このコードは、入力type = 'text'のみの「Enter」キーを防止するためのものです。(訪問者がページ全体でEnterキーを押す必要がある場合があるため)他のアクションでも「Enter」を無効にしたい場合は、console.log(e);を追加できます。テスト目的で、ChromeでF12を押し、「コンソール」タブに移動して、ページの「バックスペース」を押し、その中を調べて返される値を確認します。次に、これらのすべてのパラメーターをターゲットにして、コードをさらに拡張できます。上記のニーズに合わせて「e.target.nodeName」「e.target.type」などの...


2
実際にはそうなるはずですe.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。指定されたコードを使用すると、ラジオまたはチェックボックスがフォーカスされている場合にフォームを送信できます。
afnpires 2016年

3

あなたがすでにこの問題を解決しているか、誰かが今これを解決しようとしているのかはわかりませんが、これが私の解決策です!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});

2

簡単な方法は、ボタンのタイプをボタンに変更することです-HTMLで、jsにイベントを追加します...

これからの変更:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

そしてjsまたはjqueryに追加:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});

1

次のコードは、フォームの送信に使用されるEnterキーを無効にしますが、テキストエリアでEnterキーを使用することを許可します。必要に応じて、さらに編集できます。

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 

1

Firefoxでは、入力時にEnterキーを押すと、上位フォームが送信されます。解決策は送信フォームにあり、これを追加します:

<input type="submit" onclick="return false;" style="display:none" />

1

3年後、誰もこの質問に完全に答えていません。

依頼者は、デフォルトのフォーム送信をキャンセルして、自分のAjaxを呼び出したいと考えています。これは、単純なソリューションを使用した単純な要求です。各入力に入力されたすべての文字をインターセプトする必要はありません。

かどうか、フォーム送信ボタンを持っていると仮定し<button id="save-form">たり<input id="save-form" type="submit">、実行します。

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});


-2

ファイルが完了すると(ロード完了)、スクリプトは「Entry」キーの各イベントを検出し、背後のイベントを無効にします。

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

説明を追加
HaveNoDisplayName

@HaveNoDisplayName:更新されました。
McNavy 2016

-4

すべてのブラウザーのJavaScriptでの完全なソリューション

上記のコードとほとんどのソリューションは完璧です。しかし、私は不完全である最も好きな「短い答え」を考えます。

だからここに完全な答えがあります。JavaScriptとIE 7のネイティブサポート

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

このソリューションでは、ユーザーがEnterキーを使用して送信するのを防ぎ、ページを再読み込みしないか、フォームが下にある場合はページの上部に移動しません。


8
これにより、[送信]ボタンをクリックした場合にフォームが送信されなくなります。
Mario Werner

-10

これはどう:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

これにより、アプリの送信ボタンを含むすべてのフォームが無効になります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.