Enterキーを押して、ユーザーがフォームを送信できないようにする

Webサイトでアンケートを実施していますが、ユーザーがEnterキーを押した（理由がわからない）と、送信ボタンをクリックせずに誤ってアンケート（フォーム）を送信した場合に問題が発生するようです。これを防ぐ方法はありますか？

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

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

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

どこでもキーの入力を禁止する

<textarea>フォームにがない場合は、次のコードをに追加してください<form>。

<form ... onkeydown="return event.key != 'Enter';">

またはjQueryで：

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

これにより、フォーム内のすべてのキー押下がでチェックされますkey。そうでない場合はEnter、戻りtrue、通常どおりに続行します。もしそうならEnter、それは戻っfalseて何もすぐに停止するので、フォームは送信されません。

keydownイベントが好まれるkeyupようkeyup手遅れブロック形態に提出しています。歴史的にはもありましたkeypressが、これはと同様に非推奨ですKeyboardEvent.keyCode。KeyboardEvent.key代わりに、押されているキーの名前を返すを使用する必要があります。ときにEnterチェックされ、これは13（通常は入力）チェックも108として（テンキー入力）であろう。

$(window)他のいくつかの回答で示唆されているように、IE <= 8では/ $(document)では機能しないので、これらの貧しいユーザーもカバーしたい場合は、これは良い選択ではありません。keydownkeyup

テキストエリアでのみキーの入力を許可する

あなたが持っている場合は<textarea>、あなたの形で（これはもちろん必要があり、その後ではありませんすべての個々の入力要素にkeydownイベントハンドラを追加し、Enterキーを受け入れます）<textarea>。

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

ボイラープレートを減らすために、これはjQueryで実行することをお勧めします。

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

これらの入力要素に他のイベントハンドラー関数がアタッチされており、何らかの理由でEnterキーで呼び出したい場合は、falseを返すのではなく、イベントのデフォルトの動作のみを防止して、他のハンドラーに適切に伝播できるようにします。

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

テキストエリアと送信ボタンのみにキーの入力を許可します

送信ボタンでEnterキーも許可する<input|button type="submit">場合は、以下のようにセレクターをいつでも調整できます。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

input[type=text]他のいくつかの回答で提案されているように、HTML5の非テキスト入力はカバーされていないため、これは適切なセレクタではありません。

セクション4.10.22.2 W3C HTML5仕様の暗黙的な提出は、次のように述べています。

form要素のデフォルトボタンは、最初にボタンを提出して、ツリーの順序を持つフォーム所有者のものであるform要素。

ユーザーエージェントがユーザーによるフォームの暗黙的な送信をサポートしている場合（たとえば、一部のプラットフォームでは、テキストフィールドがフォーカスされているときに「Enter」キーを押すと、暗黙的にフォームが送信される）、デフォルトのボタンにアクティブ化が定義されているフォームに対してこれを行うこの動作により、ユーザーエージェントは、デフォルトのボタンで合成クリックのアクティブ化手順を実行する必要があります。

注：したがって、デフォルトのボタンが無効になっている場合、そのような暗黙的な送信メカニズムが使用されていると、フォームは送信されません。（ボタンが無効になっている場合、アクティブ化動作はありません。）

したがって、フォームの暗黙的な送信を無効にする標準準拠の方法は、無効化された送信ボタンをフォームの最初の送信ボタンとして配置することです。

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

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

このアプローチの優れた機能の1つは、JavaScriptがなくても機能することです。JavaScriptが有効かどうかに関係なく、暗黙的なフォーム送信を防ぐために、標準に準拠したWebブラウザーが必要です。

フォームが送信されないようにするために、キーを押すことに関連する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(); }
    });

スクリプトを使用して実際の送信を行う場合は、次のように「return false」行をonsubmitハンドラーに追加できます。

<form onsubmit="return false;">

JavaScriptからフォームでsubmit（）を呼び出しても、イベントはトリガーされません。

使用する：

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

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

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

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

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

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

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

まだコメントできないので、新しい回答を投稿します

受け入れられた答えは大丈夫ですが、テンキーのエンターで送信を停止していませんでした。少なくとも現在のバージョンのChromeでは。キーコードの条件をこれに変更する必要があり、それが機能しました。

if(event.keyCode == 13 || event.keyCode == 169) {...}

目標を達成することが私の解決策であり、クリーンで効果的です。

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

完全に異なるアプローチ：

1. <button type="submit">フォームの最初のボタンは、を押すとアクティブになりますEnter。
2. これはボタンが非表示になっている場合でも同様です style="display:none;
3. そのボタンのスクリプトは戻ることができます false、送信プロセスを中止します。
4. 別<button type=submit>のフォームを送信することもできます。true提出をカスケードするために戻るだけです。
5. Enter実際の送信ボタンにフォーカスがあるときに押すと、実際の送信ボタンがアクティブになります。
6. Enter内部<textarea>または他のフォームコントロールを押すと、通常どおり動作します。
7. フォームコントロールEnter内を押すと<input>、最初のトリガーがトリガーされます<button type=submit>、が返されるfalseため、何も起こりません。

したがって：

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

フォームに「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>

送信ボタンを配置しないことで実現できます。スクリプトを入力（type = button）に追加するか、フォームでデータを送信する場合はeventListenerを追加します。

むしろこれを使う

<input type="button">

これを使うより

<input type="submit">

1. 入力またはボタンにtype = "submit"を使用しないでください。
2. 使用タイプ=「ボタン」と使用jsが[jqueryの/角度の/ etc]サーバーにフォームを提出します。

特定の入力のみが送信されないようにする必要があったので、クラスセレクターを使用して、必要なときにいつでもこれを「グローバル」機能にすることができました。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

そして、このjQueryコード：

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

または、キーダウンが不十分な場合：

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

いくつかのメモ：

ここでさまざまな良い答えを変更すると、Enterキーはkeydownすべてのブラウザで機能するようです。別bind()のon()方法として、メソッドを更新しました。

私はクラスセレクターの大ファンであり、すべての長所と短所とパフォーマンスの議論を比較検討しています。私の命名規則は、CSSスタイル設定と区別するために、jQueryがIDとして使用していることを示す「idSomething」です。

JavaScriptメソッドを作成して、Enterキーがヒットしたかどうかを確認し、ヒットした場合は送信を停止することができます。

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

submitメソッドで呼び出すだけです。

BLOCK SUBMITのみですが、Enterキーのその他の重要な機能ではありません<textarea>。

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

これは完璧な方法です、あなたのページからリダイレクトされません

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

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

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

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

onkeypress JSは、何をする必要があるかもしれません。大規模な地球規模の変化は必要ありません。これは、自分でアプリを最初からコーディングするのではなく、他の誰かのWebサイトを分解して再テストすることなく修正する場合に特に当てはまります。

ここには良い答えがたくさんありますが、UXの観点から何かを貢献したいだけです。フォームのキーボードコントロールは非常に重要です。

問題は、キープレスでの送信を無効にする方法Enterです。Enterアプリケーション全体で無視する方法ではありません。したがって、ウィンドウではなくフォーム要素にハンドラーをアタッチすることを検討してください。

Enterフォーム送信を無効にしても、次のことが可能になります。

1. Enter送信ボタンがフォーカスされている場合のフォーム送信。
2. すべてのフィールドが入力されたときのフォーム送信。
3. を介した非送信ボタンとの相互作用Enter。

これは単なるボイラープレートですが、3つすべての条件に従います。

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

私がここで答えを見ていないもの：ページ上の要素をタブで移動する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/

私の特定のケースでは、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を使用しているユーザーに特に役立ちます。

これは私のために働く

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

私は小さなCoffeeScriptコードを追加したいと思います（フィールドテストされていません）：

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

（unless句の素敵なトリックを気に入っていただければ幸いです。）

JavaScriptの使用（入力フィールドをチェックしない）：

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

これを特定のフィールド、たとえば入力タイプのテキストに適用したい場合：

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

これは私の場合うまくいきます。

あなたのCSSに移動してそれを追加すると、入力が送信されている限り、それが不要になったときに削除または入力activateしてdeactivate代わりに、式の送信が自動的にブロックされます

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

を使用javascript:void(0)してフォームの送信を防止することもできます。

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

これは、他のソリューションに非常に不満を感じた後、すべてのブラウザで私にとってうまくいきました。name_space外部関数は、グローバルを宣言しないようにするためのものです。これもお勧めします。

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

使用例：

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

使用する：

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