JQuery を使用して Ctrl Enter を実装して form_jquery を送信する方法

手間を省くために、マウスを使用する代わりにキーボードのキーの組み合わせを使用することがあります。現在は JQuery を使用して Ctrl Enter を実装し、フォームを送信します。

投稿する際、内容入力ボックスに内容を入力後、「送信」ボタンをクリックするとコンテンツが公開されます。ただし、「怠け者」であれば、マウスを動かさずにキーボードの Ctrl Enter キーを押したままにすることで、フォームを送信してコンテンツの公開を完了することができます。
もちろん、入力ボックスは複数行のテキスト入力ボックスであるため、テキストエリアで Enter キーを押すと行が変更され、フォームを直接送信 (送信) できないことがわかっています。デフォルトでは、ブラウザーは Ctrl キーを無視します。 。次に、JavaScript スクリプトを使用して、フォーム送信を完了するための Ctrl Enter キーの組み合わせの使用を制御できます。この記事では、jQuery に基づいた Ctrl Enter フォーム送信の効果を例を使用して説明します。
HTML
ページ本文には、テキストエリア入力ボックス、送信ボタン、および送信された結果を表示する div#result を配置します。

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

CSS
数行の CSS を記述するだけで、テキストエリアの入力ボックス、送信ボタン、送信後にコンテンツを表示するための .post スタイルを変更できます。

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 

jQuery
まず、jQuery ライブラリをプリロードする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

単純なプラグイン ctrlEnter() を作成してみましょう。これは 2 つのパラメータを取ります。最初の パラメータ btns はプラグインが動作する要素を表します。 各パラメータ fn は呼び出される関数を表します。関数 PerformAction() をプラグインに追加して、内部で確実に呼び出されるようにします。次に、プラグインはキーダウン キーボードのキーが押されるとキーボード イベントの監視を開始し、Enter キーと Ctrl キーが押されたかどうかを判断し、performAction() を呼び出して、デフォルトのキャリッジ リターンとライン フィードを防止します。行動。 。次に、ボタンをクリックしてコンテンツを送信できるように、クリック イベントをボタンにバインドし、performAction() を呼び出す必要もあります。

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

最後に、ctrlEnter を呼び出してテキストエリアのコンテンツを #result に送信し、キャリッジ リターンを br に置き換えて、テキストエリアをクリアします。もちろん、実際のアプリケーションでは、コンテンツはバックグラウンド処理プログラムにポストされ、バックグラウンド プログラムの PHP やその他のプロセスがコンテンツとデータのやり取りを処理する必要があります。

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 

上記は JQuery を使用して Ctrl Enter を実装してフォームを送信する方法です。この記事が学習に役立つことを願っています。