3

私はこれに似たjQuery/HTMLコードを持っていました：

<form action="/SomeAction" method="post">
  <input id="my-textbox" type="text" placeholder="Write something and press enter to continue..." />
</form>

<script type="text/javascript">
 $(function() {
     $('#my-textbox').keyup(function(e) {
        var $textbox = $(this);
        if ($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });
</script>

目的は、ユーザーがキーを押したときにフォームを自動的に送信することでしたEnter。私はFirefoxを定期的に使用しているので、GoogleChromeとInternetExplorerでテストするまではすべて問題ありませんでした。

Enter後のブラウザでキーを押すと、フォームが2回送信されることがありました。POSTDBに重複するエントリがあり、 Fiddlerを使用しているのが2つあるので、これは簡単にわかりました。

いくつかのテストの結果、問題はjQueryコードであることがわかりました。これは、テキストボックスが入力時に自動的に送信され、このコードを使用するPOSTと一部のブラウザーで1秒が生成されるためです。

私の質問は次のとおりです。

（私のテストでFirefoxが行ったように）ブラウザが2番目のフォームの投稿を賢く阻止しないのはなぜですか？

すべてのプラットフォームのすべての主要なブラウザでこの動作を期待する必要がありますか？

このコードを改善してJavaScriptを使用して送信を実行する方法はありますが、フォームを2回送信しないでください。

4

4 に答える 4

5

（私のテストでFirefoxが行ったように）ブラウザが2番目のフォームの投稿を賢く阻止しないのはなぜですか？

これがデフォルトの動作です。スクリプトがなく、デフォルトの動作でフォームがにPOSTされない場合はどうなりますかenter。

すべてのプラットフォームのすべての主要なブラウザでこの動作を期待する必要がありますか？

はい

このコードを改善してJavaScriptを使用して送信を実行する方法はありますが、フォームを2回送信しないでください。

グローバルmutex変数を使用し、POST形式で一度設定します。後続のPOSTでチェックして検証します。または、keyupハンドラーからfalseを返し、イベントの伝播を停止します。

于 2012-04-25T18:16:49.673 に答える
5

一部のブラウザは、フォームにボタンが1つしかない場合、入力ボタンを送信として解釈します。デフォルトreturn falseの動作でフォームを送信できないようにするための関数内。

if ($textbox.val().length > 0 && e.keyCode == 13) {
    $textbox.parent('form').submit();
    return false;
}
于 2012-04-25T18:17:01.363 に答える
2

Enterキーが押された直後（キーダウン時およびキーアップが起動する前）にフォームが送信されるため、次のことができます。

$(function() {
    $('#my-textbox').keydown(function(e){
        if(e.keyCode==13) e.preventDefault();
    }); 

    $('#my-textbox').keyup(function(e) {
        e.preventDefault();
        var $textbox = $(this);
        if($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });​

簡単なテスト。

于 2012-04-25T18:26:03.280 に答える
1

最初の送信後にtrueに設定されるブール変数を追加し、その変数をif条件で使用します。これにより、誤ってダブルクリックするのを防ぐことができます。

また、アプリケーションバックエンドでの二重送信を防ぐ必要があります（多くのWebフレームワークには、これを行うための組み込みメカニズムがあり、カスタムソリューションを簡単に思い付くことができます）。

于 2012-04-25T18:14:42.263 に答える