form - input text jquery enter




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

私はウェブサイト上でアンケートを行っています。ユーザーが入力を打つ(理由はわかりません)と、送信ボタンをクリックせずに誤ってアンケート(フォーム)を送信しているような問題があるようです。 これを防ぐ方法はありますか?

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


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

フォームに<textarea>がない場合は、 <form>次の行を追加します。

<form ... onkeypress="return event.keyCode != 13;">

またはjQueryを使用します。

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

これにより、フォーム内のすべてのキー・プレスは、keyCodeでチェックされます。 13(Enterキー)でなければ、trueを返し、何かが期待どおりに進みます。 13(Enterキー)の場合、falseを返し、何かがすぐに停止するので、フォームは送信されません。

keypressイベントはkeydownも優先されます。これは、実際に文字が挿入されている場合にのみ発生します。 キーkeydown (およびkeyup )は、コントロールキーを含む任意のキーが押されると起動されます。 また、 keypresskeyCodeは、使用されている物理キーではなく、挿入されている実際の文字を表します。 この方法では、Numpad Enterキー(108)も押されているかどうかを明示的に確認する必要はありません。 keyupがフォーム送信をブロックするには遅すぎます。

$(document)代わりに他の答えで示唆されている$(window)は、IEの<8のkeydown / keypress / keyupではkeyupしないので、これらの貧弱なユーザーをカバーしたい場合には適していません同様に。

テキストエリアにのみEnterキーを許可する

あなたのフォームに<textarea>がある場合(もちろんEnterキー受け入れる必要があります)、 <textarea>すべての入力要素にkeypressハンドラを追加します。

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

ボイラープレートを減らすには、これはjQueryで行う方が良いです。

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

これらの入力要素に他のイベントハンドラ関数が添付されていて、何らかの理由でEnterキーで呼び出す場合は、falseを返すのではなく、イベントのデフォルトの動作を防ぎ、他のハンドラに正しく伝播できます。

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

テキストエリアと入力ボタンにのみEnterキーを許可する

送信ボタン<input|button type="submit">も入力キーを許可したい場合は、以下のようにセレクタを常に絞り込むことができます。

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

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


  1. 入力/ボタンにはtype = "submit"を使用しないでください。
  2. type = "button"を使用し、js [Jquery / angular / etc]を使用してフォームをサーバーに送信します。

セクション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ブラウザが必要です。


Enterキーがヒットしたかどうかを確認するJavaScriptメソッドを作成することもできます。そうであれば、送信を停止することもできます。

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

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


これは、他のソリューションに大きな不満を感じた後、すべてのブラウザで私のために働いています。 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!');}
    );
});

これは私のために働く

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

つかいます:

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

このソリューションは、Webサイト上のすべてのフォーム(Ajaxで挿入されたフォーム上)で動作し、入力テキストにEnterキーのみが表示されないようにします。 ドキュメントを準備した状態にして、この問題を忘れてしまいましょう。


つかいます:

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

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

<form onsubmit="return false;">

フォームからJavaScriptからsubmit()を呼び出すと、イベントはトリガーされません。


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

全く異なるアプローチ:

  1. フォームの最初の<button type="submit">は、 Enterキーを押すとアクティブになります。
  2. これは、ボタンがstyle="display:none;非表示になっていても当てはまりますstyle="display:none;
  3. そのボタンのスクリプトはfalseを返しfalse 。これは、送信プロセスを中止します。
  4. あなたはフォームを送信するために別の<button type=submit>を持つことができ<button type=submit> 。 提出をカスケードするためにtrue戻ってください。
  5. 実際の送信ボタンがフォーカスされている間にEnterキーを押すと、実際の送信ボタンが有効になります。
  6. <textarea>内のEnterキーまたは他のフォームコントロールを押すと、正常に動作します。
  7. <input>フォーム内のEnterキーを押すと、最初の<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>

次のようなメソッドを使用できます。

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

私がここで答えていない何か:ページ上の要素をタブで移動すると、送信ボタンに移動したときに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/ : https://jsfiddle.net/nemesarial/6rhogva2/


私のケースでは、 jQuery UIオートコンプリートフィールドとテキストエリアの2つのフォームがありましたので、 Enterを受け入れることを間違いなく望んでいました。 そこでフォームからtype="submit"入力を削除し、アンカー<a href="" id="btn">Ok</a>を追加しました。 次にボタンとしてスタイルを設定し、次のコードを追加しました:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

ユーザーがすべての必須フィールドを入力すると、 validateData()が成功し、フォームが送信されます。


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


私は、フォームが送信されるのを防ぐために、キーの押下に関連する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(); }
    });

私は少しコーヒースクリプトコード(フィールドテストされていない)を追加したいと思います:

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

(私はあなたが素晴らしい節を好きであることを願っています。


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

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




form-submit