ユーザーから提供叩入

StackOverflow https://stackoverflow.com/questions/895171

質問

私の調査でホームページがあると考えられる課題は、ユーザーに打ち（なぜだかよくわかりません)と誤って提出の調査（フォーム）をクリックせずに提出ボタンを押します。があるのを防止す。

私が使っているHTML,PHP5.2.9、jQueryとして位置づけられる。

役に立ちましたか？

解決

あなたは、このような

などの方法を使用することができます 
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

：彼らはすべてのフィールドを完了している場合は、

それはより使いやすく、人々が押すことができるように、オリジナルのポストにコメントを読んで 入力してください 

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（テンキー入力する）。

IE <= 8で$(window) / $(document)では動作しません。代わりにkeydownのいくつかの他の回答で提案されているように、あなたが同様にそれらの貧しい人々のユーザーをカバーするようにしている場合には良い選択ではありませんので、

、そのkeyupに注意してください。

のみを許可テキストエリア

上のキーを入力してください あなたのフォームで<textarea>を持っている場合は、

（もちろんがのキーを入力して受け入れるべきである）、そして<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";
});

あなたはまた、それが適切に他のハンドラに伝播することができるようにのみ、代わりにfalseを返すのイベントのデフォルト動作を防ぐため、何らかの理由でキーを入力するに起動したいのですが、それらの入力要素に取り付けた他のイベントハンドラ関数を、持っている場合ます。

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

のみ

をテキストエリアにキーを入力し、送信ボタンを許可します あなたも<input|button type="submit">送信ボタン上のキーを入力できるようにしたい場合は、

、その後はいつものように以下のセレクタを絞り込むことができます。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});
いくつかの他の回答で提案されているように、

それは良い選択ではありませんので、これらのHTML5非テキスト入力をカバーしていないことに注意してくださいinput[type=text]ます。

私は提出されてからフォームを防止するために、キーを押すことに関連するすべての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(); }
    });

部4.10.22.2暗黙の提出 のW3CがHTML5の仕様は

A form 要素の デフォルトボタン 最初の 提出ボタン に 木順 その 形のオーナー であること form 要素になります。

場合、ユーザーエージェントに対応させ、ユーザーあるいは、フォームの送信が暗黙的に(例えば、いくつかのプラットフォームを打つには"enter"キーをテキストフィールドは暗黙のうちに提出し形成しうる形式が デフォルトボタン が定義されて 活性化挙動 必要因のユーザエージェントを 走り合成をクリックし起動手順 その デフォルトボタン.

注意： その結果、場合に デフォルトボタン が無効になるときは暗黙の提出の機構を使用します。(Aボタンがない 活性化挙動 時無効になります。)

そのため、標準準拠の方を無効にする暗黙的な投稿の形式は無効にsubmitボタンで初めて提出ボタンをタ形式：

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

一つの特長で、このアプローチで作品 なJavaScript;るか否かのJavaScriptを有効にすると、標準準拠したwebブラウザの防止のために必要な暗黙的な形で提出してください。

あなたが実行するスクリプトを使用する場合は、

実際、あなたはこのようなをonSubmitハンドラにライン「偽を返す」を追加することができ、提出します：

<form onsubmit="return false;">

イベントをトリガしませんJavaScriptからフォーム上の（）を呼び出す提出します。

使用します。

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

このソリューションでは、入力テキストに S 入力のみの防止、（もアヤックスで挿入されたフォーム上の）ウェブサイト上のすべてのフォーム上で動作します。文書レディ機能でそれを置き、生活のため、この問題を忘れています。

代わりに不自然に思えるかもしれない、 Enterを押すからユーザーを防止する

、あなたがされている形態を残して、いくつかの余分なクライアント側の検証を追加することができます。調査が終了していない場合は、結果が送信されませんサーバーとユーザーにフォームを完了するために、終了する必要があるもの伝える素敵なメッセージを取得します。あなたはjQueryのを使用している場合は、検証プラグインを試してみます：

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

これは引くより多くの作業が必要になります。 ボタンを入力し、しかし確実に、それはより豊かなユーザーエクスペリエンスを提供します。

私はまだコメントできませんので、私は新しい答えを投稿します。

受け入れ答えは大丈夫っぽいですが、それは入力したテンキーに提出し、停止されませんでした。少なくともクロムの現在のバージョンインチ私はそれが動作しますが、これにキーコード条件を変更する必要がありました。

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

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

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

目標を達成するために私の解決策です、 それはクリーンかつ効果的である。

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

全く異なるアプローチ:

  1. 最初に <button type="submit"> は活性化された喫緊の 入.
  2. これがtrueの場合においてもボタン非表示と style="display:none;
  3. スクリプトをこのボタンで戻り false, る異常終了しの投稿です。
  4. まだまだ他 <button type=submit> に提出します。戻っ true カスケードを提出してください。
  5. 押 入 が提出ボタンに焦点を活発に実際に提出ボタンを押します。
  6. 押 入 内部 <textarea> その他の形態のコントロールシステムの振る舞いをします。
  7. 押 入 内部 <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：無効（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>

私は、提出からのみ、特定の入力を防止するために必要なので、私はそれを必要な場所これは、「グローバル」な特徴であるようにする、クラスセレクタを使用します。

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

そして、このjQueryのコード：

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

あるいは、KeyDownイベントが不足している場合

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

いくつかの注意ます：

入力します。キーは、すべてのブラウザでkeydownのために働くようだ、ここでは様々な良い答えを変更します。代替のために、私はbind()メソッドにon()を更新します。

私はすべての長所と短所とパフォーマンスの議論を計量、クラスセレクタの大ファンです。私の命名規則は、jQueryのCSSスタイルからそれを分離するために、IDとしてそれを使用していることを示すために「idSomething」です。

  1. 使用しない type="submit" 入力またはボタンを押します。
  2. 使用 type="button" 使js[Jquery/角/その他]の募形式をサーバーです。

は、入力します。キーを打ったかどうかを確認するために、JavaScriptのメソッドを作ることができ、それが提出を停止すること、であるならば。

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

ただ、提出方法でそれを呼び出します。

行うことができ、送信ボタンを置きません。ジャスト入力（タイプ=ボタン）にスクリプトを置くか、あなたはそれが形式でデータを提出する場合のEventListenerを追加します。

むしろこれを使用する

<input type="button">

これを使用するよりも、

<input type="submit">

私は、「AJAXテキストフィールド」（YiiのCGridView）でグリッドを持っていたし、ちょうど1ボタンを提出似問題を、持っていました。毎回私は、テキストフィールドで検索を行なったし、送信されたフォームを入力してヒット。私はそれがビュー（MVCパターン）間の唯一の共通ボタンがあったので、ボタンで何かをしなければなりませんでした。私がしなければならなかったすべてはtype="submit"を削除したとonclick="document.forms[0].submit()を置く

私はそれがうまくすべての答えで覆われていると思うが、あなたは、いくつかのJavaScriptの検証コードとボタンを使用している場合、あなただけの期待どおりに提出呼び出すために入力するためのフォームのonkeypressではを設定することができます：

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

onkeypressではJSは、あなたがする必要があるものは何でもある可能性があります。大きな、世界的な変更の必要はありません。あなたは最初からアプリをコーディング1いないのであれば、これは特にそうである、あなたはそれを離れて引き裂く、それを再テストすることなく修正他人のウェブサイトに持ち込まれてきます。

多くの答えがここに、どんな貢献をもUX。キーボードの操作形態 非常に 重要である。

問題は、これらを無効にするからの提出に打鍵 Enter.ないか無視する Enter 全体の願います。う考えを取り付けるハンドラを形要素に面しています。

無効化 Enter フォームの提出は依然として、以下の

  1. 書の提出によ Enter が提出ボタンに焦点が絞られています。
  2. フォーム送信時にすべての分野において入力されます。
  3. 相互作用の非ットボタンを経由 Enter.

これだけの定型で以下のすべての三条件です。

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

ブロックのみSUBMITが、このような<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>

私の具体的なケースでは、私は、フォームを送信から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(); }
    });
});
ときにタブページの要素を通して、あなたは送信ボタンを取得する場合 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/する

私は（テストフィールドではない）、ほとんどのCoffeeScriptのコードを追加したいです 

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

（私はしない限り句での素敵なトリックのようにあなたを願っています。）

、自動的に限り、あなたは、もはやそれはあなたが

代わりにそれを削除したり、型activateとdeactivateことができますしたい場合は、入力を提出していないとしてあなたformularの提出をブロックしますあなたのCSSに移動し、それにそれを追加 
 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

を使用 Javascript （クィディッチ"のように入力フィールド):

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

だいたいこの特定の分野、例えば入力タイプtext：

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

この作品もました。

これは、他のソリューションと非常にフラストレーションの後にすべてのブラウザで私のために働いています。 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>

私の場合は、フォームでのjQuery UI のオートコンプリートフィールドとテキストエリアのカップルを持っていましたので、私は間違いなく彼らが 入力して受け入れることを望んでいました。だから私は、フォームから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()は成功し、フォームを送信した場合。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top