906

Web サイトで調査を行っていますが、ユーザーが Enter キーを押して (理由はわかりません)、送信ボタンをクリックせずに誤って調査 (フォーム) を送信してしまうという問題があるようです。これを防ぐ方法はありますか？

調査では HTML、PHP 5.2.9、および jQuery を使用しています。

4

36 に答える 36

988

次のような方法を使用できます。

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

元の投稿のコメントを読んで、それをより使いやすくし、Enterすべてのフィールドを完了した場合に人々が押すことができるようにするために:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});
于 2009-05-21T21:19:10.760 に答える
70

フォームが送信されないようにするために、キーを押すことに関連する 3 つのイベントすべてをキャッチする必要がありました。

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

上記のすべてを組み合わせて、コンパクトなバージョンにすることができます。

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
于 2012-03-27T13:57:03.087 に答える
24

使用する：

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

このソリューションは、Web サイトのすべてのフォーム (Ajax で挿入されたフォームも含む) でEnter機能し、入力テキストの s のみを防止します。ドキュメント準備機能に配置して、この問題を一生忘れてください。

于 2014-05-30T12:36:09.703 に答える
22

不自然に思えるかもしれませんが、ユーザーが を押さないようにする代わりにEnter、フォームをそのままにして、クライアント側の検証を追加することができます:フォームを完了するために完了する必要があるもの。jQuery を使用している場合は、検証プラグインを試してください。

http://docs.jquery.com/Plugins/Validation

これには、ボタンをキャッチするよりも多くの作業が必要になりEnterますが、ユーザー エクスペリエンスがより豊かになることは間違いありません。

于 2009-05-21T21:35:27.250 に答える
21

素敵なシンプルな小さなjQueryソリューション：

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
于 2011-12-09T20:35:12.873 に答える
9

フォームに「javascript:void(0);」のアクションを与える トリックを行うようです

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>
于 2012-04-27T11:49:19.950 に答える
2

すべての回答で十分にカバーされていると思いますが、JavaScript 検証コードを含むボタンを使用している場合は、フォームの onkeypress を Enter に設定して、送信を期待どおりに呼び出すことができます。

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

onkeypress JS は、あなたがする必要があるものなら何でもかまいません。大規模なグローバルな変更は必要ありません。これは、アプリをゼロからコーディングしたのではなく、他の人の Web サイトを分解して再テストせずに修正することになった場合に特に当てはまります。

于 2013-07-28T17:57:08.247 に答える
2

「ajax テキストフィールド」(Yii CGridView) と送信ボタンが 1 つだけのグリッドがある、同様の問題がありました。テキストフィールドで検索を行い、送信されたフォームを入力するたびに。ビュー間の唯一の共通ボタン (MVC パターン) だったので、ボタンで何かをしなければなりませんでした。私がしなければならなかったのは、取り外しtype="submit"て置くことだけでしたonclick="document.forms[0].submit()

于 2012-07-19T11:45:52.893 に答える
1

ページ上の要素をタブで移動Enterし、送信ボタンに到達したときに押すと、フォームの onsubmit ハンドラーがトリガーされますが、イベントは MouseEvent として記録されます。ほとんどのベースをカバーする私の短い解決策は次のとおりです。

これはjQuery関連の回答ではありません

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

実際の例を見つけるには: https://jsfiddle.net/nemesarial/6rhogva2/

于 2016-08-24T12:31:01.500 に答える
0

私の特定のケースでは、ENTER によるフォームの送信を停止し、送信ボタンのクリックをシミュレートする必要がありました。これは、モーダル ウィンドウ (古いコードを継承) 内にいたため、送信ボタンにクリック ハンドラーがあったためです。いずれにせよ、この場合の私のコンボソリューションは次のとおりです。

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

この使用例は、IE8 を使用しているユーザーに特に役立ちます。

于 2012-08-16T17:35:36.210 に答える
0

これは私のために働く

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});
于 2013-03-14T17:02:02.163 に答える
0

Alpine を使用している場合は、以下を使用して、 を押してフォームの送信を防ぐことができますEnter。

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

または、修飾子を使用して、要素ではなく、ページ.windowのルート オブジェクトにイベント リスナーを登録することもできます。window

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>
于 2022-01-27T12:34:22.450 に答える
-2

使用する：

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>
于 2012-11-09T04:55:47.097 に答える