web-dev-qa-db-ja.com

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

私はウェブサイトで調査をしていますが、ユーザーが入力ボタンを押して（なぜかわかりません）、送信ボタンをクリックせずに誤って調査（フォーム）を送信すると問題が発生するようです。これを防ぐ方法はありますか？

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

jqueryhtmlformsform-submit
675
DForck42

次のような方法を使うことができます。

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

Enterキーをどこにも許可しない

フォームに<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)の代わりに$(document)はIE <= 8のkeydown/keyupには機能しないので、それらの貧弱なユーザーをカバーするのであればそれは良い選択ではありません。

テキスト領域でのみEnterキーを許可する

フォームに<textarea>がある場合（もちろん should を受け入れる）、<textarea>ではないすべての個々の入力要素にkeydownハンドラを追加してください。

<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">でもEnterキーを許可したい場合は、以下のようにいつでもセレクタを改良できます。

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

他の回答で提案されているinput[type=text]はそれらのHTML5非テキスト入力をカバーしていないので、それは良いセレクタではありません。

536
BalusC

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

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

form 要素のdefaultボタンは最初の submitボタンtree order の form owner は form 要素です。

ユーザーエージェントがフォームの暗黙的な送信をサポートしている場合（たとえば、一部のプラットフォームでは、テキストフィールドが暗黙的にフォームを送信している間に「Enter」キーを押す）、 デフォルトボタン には定義済みの アクティベーション動作があります ユーザーエージェントは 合成クリックアクティベーションステップを実行する必要があります その デフォルトボタン 。

注：したがって、 default button が無効になっている場合、そのような暗黙の送信時にフォームは送信されませんメカニズムが使用されます。 （無効になっている場合、ボタンには アクティベーション動作 がありません。）

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

<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ブラウザーが必要です。

52
Daniel Trebbien

実際の送信を実行するためにスクリプトを使用する場合は、次のようにonsubmitハンドラに "return false"という行を追加できます。

<form onsubmit="return false;">

JavaScriptからフォーム上でsubmit（）を呼び出してもイベントは発生しません。

44
Tom Hubbard

つかいます：

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

この解決策は、Webサイト上のすべてのフォーム（Ajaxを使用して挿入されたフォーム）でも機能します。 Enter入力テキスト内のs。それを文書に対応した関数に置き、この問題を一生忘れてください。

22
Buzogany Laszlo

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

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

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

20
bbmud

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

受け入れられた答えは大丈夫です、しかしそれはテンキーの入力で送信を停止していませんでした。少なくともChromeの現在のバージョンでは。キーコードの条件をこれに変更しなければなりません、そしてそれはうまくいきます。

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

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

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

それは目標を達成するための私の解決策です、それは清潔で効果的です。

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

まったく異なるアプローチ：

  1. フォームの最初の<button type="submit">はを押すと有効になります Enter
  2. ボタンがstyle="display:none;で隠されていても同じです。
  3. そのボタンのスクリプトは、送信プロセスを中止するfalseを返すことができます。
  4. フォームを送信するための<button type=submit>をもう1つ持つことができます。投稿をカスケードするには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>
9
Erics

フォームに「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>
8
sidarcy
  1. 入力またはボタンに type = "submit" を使用しないでください。
  2. type = "button" を使用し、js [Jquery/angular/etc]を使用してサーバーにフォームを送信します。
6
Irfan Ashraf

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

<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 keyはすべてのブラウザのkeydownに対して機能するようです。代わりに、bind()をon()メソッドに更新しました。

私はクラスセレクタの大ファンで、長所と短所、そしてパフォーマンスに関する議論をすべて重視しています。私の命名規則は、jQueryがそれをIDとして使用し、CSSスタイルと区別するための「idSomething」です。

6
goodeye

JavaScriptメソッドを使って、 Enter キーが押された場合は、送信を停止します。

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

Submitメソッドでそれを呼び出すだけです。

5
Brandon

送信ボタンを押さないでください。スクリプトを入力（type = button）に入れるか、フォームにデータを送信したい場合はeventListenerを追加するだけです。

むしろこれを使う

<input type="button">

これを使うより

<input type="submit">
4
Jimwel Anobong

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

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

Onkeypress JSはあなたがする必要があるものなら何でもである可能性があります。より大きな、地球規模の変化は必要ありません。あなたが最初からアプリをコーディングしているのではなく、他の人のWebサイトを引き裂いて再テストすることなく修正しなければならない場合、これは特に当てはまります。

2
garlicman

私は "ajax textfields"（Yii CGridView）とただ一つの送信ボタンを持つグリッドを持っているという同じような問題を抱えていました。私がテキストフィールドで検索をするたびに、提出されたフォームを入力してください。ボタンはビュー間で唯一の共通ボタンであるため（MVCパターン）、ボタンで何かをする必要がありました。私がしなければならなかったのはtype="submit"を削除してonclick="document.forms[0].submit()を置くことだけでした

2
StackUnder

ここにはすでにたくさんの良い答えがあります。私は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;
  }
});
1
Solvitieg

ブロックサブミットのみですが、<textarea>に新しい段落を作成するなど、enterキーの他の重要な機能はありません。

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>
1
mate.gwozdz

これは私のために働く

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

CoffeeScriptコードを少し追加したいのですが（実地でのテストはしていません）：

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

（あなたがexcept節のNiceトリックを好むことを望みます。）

0
edx

私が見たことがない何かがここで答えました：あなたがページの上で要素を通ってタブを押すとき、押す 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/

0
Nemesarial

Cssに移動し、それを追加すると、入力が不要な場合は自動的にフォーミュラーの送信がブロックされます。削除するか、代わりにactivateおよびdeactivateと入力できます

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

私の具体的なケースでは、私は、フォームを送信から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で働く人々のために特に有用です。

0
Stone