Enterキーを押してWebフォームを送信するのを防ぐ方法は？

ENTERキーを押してWebベースのアプリケーションでフォームを送信しないようにするにはどうすればよいですか？

[ リビジョン 2012、インラインハンドラーなし、textareaの入力処理を保持]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

これで、フォームにキープレスハンドラーを定義できます：
<form [...] onkeypress = "return checkEnter（event）">

document.querySelector('form').onkeypress = checkEnter;

Enter送信を停止し、バックスペースキーを停止するために使用できるjQueryハンドラーを次に示します->戻る。「keyStop」オブジェクトの（keyCode：selectorString）ペアは、デフォルトのアクションを起動してはならないノードを一致させるために使用されます。

Webはアクセシブルな場所である必要があることを忘れないでください。これはキーボードユーザーの期待に反しています。とは言っても、私の場合、私が取り組んでいるWebアプリケーションはとにかく戻るボタンが気に入らないので、キーショートカットを無効にしても問題ありません。「入力する->提出する」の議論は重要ですが、実際に尋ねられた質問とは関係ありません。

これがアクセシビリティについて考えるあなた次第のコードであり、なぜあなたが実際にこれをしたいのか！

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

onsubmitハンドラから単にfalseを返す

<form onsubmit="return false;">

または、途中でハンドラが必要な場合

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

フォームのデフォルトの送信動作をキャンセルするだけで、この関数を呼び出す必要があります。任意の入力フィールドまたはイベントに添付できます。

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

ENTERキーは、フォームのデフォルトの送信ボタンをアクティブにするだけで、最初のボタンになります

<input type="submit" />

ブラウザはフォーム内で検索します。

したがって、送信ボタンはありませんが、次のようなもの

<input type="button" value="Submit" onclick="submitform()" /> 

編集：コメントでの議論に応じて：

これは、テキストフィールドが1つしかない場合は機能しませんが、その場合は望ましい動作である可能性があります。

もう1つの問題は、フォームを送信するためにJavaScriptに依存していることです。これは、アクセシビリティの観点から問題になる可能性があります。これは<input type='button'/>、JavaScriptでを記述し<input type='submit' />、<noscript>タグ内にを配置することで解決できます。このアプローチの欠点は、JavaScriptが無効なブラウザーの場合、ENTERでフォームを送信できることです。この場合の望ましい動作を決定するのはOPです。

JavaScriptをまったく呼び出さずにこれを行う方法はありません。

純粋な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>

これは、入力type = 'text'の「Enter」キープレスアクションのみを無効にします。訪問者は引き続きWebサイト全体で「Enter」キーを使用できます。

他のアクションでも「Enter」を無効にしたい場合は、console.log（e）;を追加できます。テスト目的で、ChromeでF12を押し、「コンソール」タブに移動して、ページの「バックスペース」を押し、その中を調べて返される値を確認します。次に、これらのすべてのパラメーターをターゲットにして、コードをさらに拡張できます。上記の「e.target.nodeName」、「e.target.type」などのニーズに合わせて...

ここで同様の質問の詳細な回答を参照してください

この件、ここまたは他の投稿で私が見つけたすべての回答には1つの欠点があります。それは、フォーム要素の実際の変更トリガーも防ぐことです。したがって、これらのソリューションを実行した場合、onchangeイベントもトリガーされません。この問題を克服するために、私はこれらのコードを変更し、次のコードを自分で開発しました。これが他の人にも役立つことを願っています。「prevent_auto_submit」フォームにクラスを指定し、次のJavaScriptを追加しました。

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

私は以前、上記のようなキープレスハンドラーで常にそれを行ってきましたが、今日はより簡単な解決策を見つけました。Enterキーは、フォーム上の最初の無効になっていない送信ボタンをトリガーするだけなので、実際に必要なのは、送信しようとしているボタンをインターセプトすることだけです。

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

それでおしまい。キープレスは通常どおりブラウザ/フィールド/などによって処理されます。Enter-Submitロジックがトリガーされると、ブラウザは非表示の送信ボタンを見つけてトリガーします。そして、JavaScriptハンドラーが送信を阻止します。

IE8、9、10、Opera 9 +、Firefox 23、Safari（PC）、Safari（MAC）用のこのクロスブラウザーを作成するのに少し時間を費やしました

JSFiddleの例： http

基本コード-フォームに添付された「onkeypress」を介してこの関数を呼び出し、それに「window.event」を渡します。

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

次に、フォームで：

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

ただし、邪魔なJavaScriptを使用しない方がよいでしょう。

私の場合、このjQuery JavaScriptは問題を解決しました

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

「ENTER」を押してフォームを送信できないようにすると、一部のユーザーに不便を与える可能性があります。そのため、以下の手順に従うとよいでしょう。

'onSubmit'イベントをフォームタグに記述します。

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

JavaScript関数を次のように記述します。

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

理由が何であれ、Enterキーを押したときにフォームが送信されないようにするには、JavaScriptで次の関数を記述します。

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

ありがとう。

このタグをフォームに追加します- onsubmit="return false;" フォームを送信できるのは、いくつかのJavaScript関数のみです。

またはを押しenterたときにフォームの送信を防ぐにはtextareainputフィールドをは、送信イベントをチェックして、イベントを送信した要素のタイプを確認します。

例1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

より良い解決策は、送信ボタンがなく、通常のボタンでイベントを発生させる場合です。最初の例では2つの送信イベントが発生しますが、2番目の例では1つの送信イベントのみが発生するため、これはより良い方法です。

例2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

あなたはこれがよりシンプルで便利であることがわかります：D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

どうですか：

<asp:Button ID="button" UseSubmitBehavior="false"/>

この記事を確認して、Enterキーを押してWebフォームを送信できないようにする方法を教えてください。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

JavaScriptでフォームのキーダウンをトラップして、バブリングさえ防ぐことができると思います。WebページでEnterキーを押すと、基本的には、現在選択されているコントロールが配置されているフォームが送信されます。

このリンクは、Chrome、FF、およびIE9で動作するソリューションに加えて、IE9の開発者ツール（F12）に付属するIE7および8のエミュレーターを提供します。

http://webcheatsheet.com/javascript/disable_enter_key.php

別のアプローチは、フォームが送信されることになっている場合にのみフォームに送信入力ボタンを追加し、フォーム入力中に単純なdivに置き換えることです。

この属性をFORMタグに追加するだけです。

onsubmit="return gbCanSubmit;"

次に、SCRIPTタグに次を追加します。

var gbCanSubmit = false;

次に、ボタンを作成するか、その他の理由（関数など）で最終的に送信を許可する場合は、次の例のように、グローバルブール値を反転して.submit（）呼び出しを実行します。

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

'name'の値が異なる複数の送信ボタンがあり、送信時に同じphpファイルで異なる処理を実行するため、私はこれに遭遇しました。enter/ returnこれらの値が提出されていないとボタンはこれを破ります。それで私は考えていました、enter/ returnボタンはフォームの最初の送信ボタンをアクティブにしますか？これにより、非表示の「バニラ」送信ボタンや、実行中のphpファイルをフォームが含まれるページに戻す「名前」値を持つことができます。または、キープレスがアクティブにするデフォルト（非表示）の「名前」値、および送信ボタンが独自の「名前」値で上書きします。ちょっとした考え。

どうですか：

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

ボタンに正しい名前を付けるだけで送信されますが、テキストフィールド、つまり、returnを押したときのexplicitOriginalTargetには正しい名前がありません。

これでうまくいきました。
onkeydown = "return！（event.keyCode == 13）"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

ここに私がそれをする方法があります：

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

JavaScript外部ファイルに入れます

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

またはbodyタグ内のどこかに

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

私は同じ問題を抱えていました（大量のテキストフィールドと未熟練ユーザーのフォーム）。

私はこのようにそれを解決しました：

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

これをHTMLコードで使用します。

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

このようにして、ENTERキーは計画どおりに機能しますが、確認（2番目ENTER通常はタップ）が必要です。

私は読者ENTERに、フォームに留まることにした場合に押したフィールドでユーザーを送るスクリプトの探求を任せます。