How to use JQuery to implement Ctrl Enter to submit a form_jquery

Sometimes we use keyboard key combinations instead of using the mouse to save trouble. Today we use JQuery to implement Ctrl Enter to submit the form.

When we post, after entering the content in the content input box, you can click the "Submit" button to publish the content. However, if you are "lazy" enough, you can submit the form and complete content publishing by holding down the Ctrl Enter key on the keyboard without moving the mouse.
Of course, since the input box is a multi-line text input box textarea, we know that pressing the Enter key in the textarea can change the line and cannot directly submit the form (submit). By default, the browser ignores the Ctrl key. . Then we can use Javascript scripts to control the use of Ctrl Enter key combinations to complete form submission. This article uses examples to explain the effect of Ctrl Enter form submission based on jQuery.
HTML
In the page body, we place a textarea input box, a submit button, and a div#result that displays the submitted results.

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

CSS
Simply write a few lines of css to modify the textarea input box, button submit button, and .post style for displaying content after submission.

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
First the jQuery library must be preloaded.

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

Let’s write a simple plug-in ctrlEnter(), which takes two parameters. The first parameter btns represents the element that the plug-in acts on, and the second parameter Each parameter fn represents the called function. We add the function performAction() to the plug-in to ensure that it is called internally. Then the plug-in starts to listen for keyboard events. When a key in the keydown keyboard is pressed, it determines if the Enter key and the Ctrl key are pressed, and then calls performAction() and prevents the default carriage return and line feed behavior. . Then we should also bind the click event to the button and call performAction(), so that the content can be submitted by clicking the button.

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

Finally, call ctrlEnter to submit the content in the textarea to #result, replace the carriage return with br, and clear the textarea. Of course, in actual applications, the content should be posted to the background processing program, and the background program PHP and other processes should handle the content and data interaction.

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

The above is how to use JQuery to implement Ctrl Enter to submit a form. Do you have a clear idea? I hope this article will be helpful to your study.