web-dev-qa-db-ja.com

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

私は自分のページに次のようなJavaScriptを載せていますが、うまく動いていないようです。

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

入力時にフォームを送信しないようにしたいのですが、もっといいのは私のajaxフォームを送信するようにするためです。どちらの解決策でも問題ありませんが、上記のコードでフォームの送信が妨げられることはありません。

javascriptjqueryformsform-submit
188
Adam Levitt

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にバインドするだけでは機能しません（もう必要ありません）。そのため、コード例を適切に変更することで、これをより明確にしました。

編集3：bind()をon()に変更

393
zessx

通常フォームは上に提出されます Enter 入力要素に注目したとき.

無効にできます Enter フォーム内の入力要素に対するkey（code 13）：

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

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

57
VisioN

さらにもっと短く：

$('myform').submit(function() {
  return false;
});
41
user1017926
$('form').keyup(function(e) {
  return e.which !== 13  
});

event.whichプロパティは、event.keyCodeとevent.charCodeを正規化します。キーボードのキー入力にはevent.whichを見ることをお勧めします。

which docs。

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

このソリューションは、Web上のすべてのフォーム（ajaxを使用して挿入されたフォーム）でも機能し、入力テキストの入力のみを防ぎます。それを文書に対応した関数に置き、この問題を一生忘れてください。

14
Buzogany Laszlo

ENTERキーを押すたびにキーストロークをキャプチャしてテストしなければならないというやり過ぎは、本当に私を悩ませます。そのため、私のソリューションは次のブラウザの動作に依存しています。

ENTERキーを押すと送信ボタンにクリックイベントが発生します（IE11、Chrome 38、FF 31でテスト済み）**（ref： http://mattsnider.com/how-forms-submit-when-pressing-enter/ ）

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

<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年代以降の標準的なブラウザの動作です。

7
Costa

上記のほとんどの答えは、ユーザーがtextareaフィールドに新しい行を追加するのを妨げるでしょう。これを避けたい場合は、どの要素に現在フォーカスがあるのか​​をチェックして、この特定のケースを除外できます。

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

純粋なJavascriptでこれを完全に行うことができます。シンプルでライブラリは不要です。ここでそれは同様のトピックに対する私の詳しい答えです： フォームのエンターキーを無効にする

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

<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>

このコードはinput type = 'text'に対してのみ "Enter"キーが入力されるのを防ぐためのものです。 （訪問者がページ全体でEnterキーを押す必要があるかもしれないため）他のアクションでも "Enter"を無効にしたい場合は、console.log（e）を追加できます。あなたのテスト目的のために、そしてクロムでF12キーを押して、ページ上で「コンソール」タブに行き、そして「backspace」を押して、どんな値が返されるかを見るためにそれから調べなさい "e.target.nodeName"、 "e .target.type "その他多数...

4
Tarik

入力時に送信ボタンを無効にしたい場合は、フォームのonsubmitイベントを使用してください。

<form onsubmit="return false;">

あなたは "return false"をJS関数への呼び出しで置き換えることができます。

3
Perica Zivkovic

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

$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;
    }
});
3
Don Marcony Neves

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

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

3年後、一人もこの質問に完全に答えていない。

質問者はデフォルトのフォーム送信をキャンセルして自分のAjaxを呼び出したいと考えています。これは単純な解決策を伴う単純な要求です。各入力に入力されたすべての文字を傍受する必要はありません。

フォームに送信ボタンがあると仮定して、<button id="save-form">か<input id="save-form" type="submit">かに関係なく、

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

次のコードでは、フォームの送信に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
Radish

簡単な方法は、ボタンのタイプをボタンに変更することです-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();
});
0
Zvi Redler