How to implement Ctrl+enter submission form using jquery _jquery

Sometimes we use the keyboard combination instead of using the mouse for the sake of convenience, and today we are using jquery to implement the Ctrl+enter submission form.

When we post, in the Content input box after entering the content, you can click the "Submit" button to publish content. However, if you are "lazy", you can not move the mouse, just hold down the keyboard on the Ctrl+enter key, you can submit the form, complete the content release.
Of course, because the input box is a multiline text input box textarea, we know that in the TEXTAREA press ENTER (enter) key can be wrapped, and cannot directly submit the form (submit), and by default, the browser ignores the CTRL key. Then we can use the JavaScript script to control using the Ctrl+enter key to complete the form submission, this article combined with the example to explain the jquery based Ctrl+enter submission Form effect.
HTML
In the body of the page, we place a textarea input box, a button to submit buttons, and a result div#result after the presentation.

<div id= "Result" ></div> 
<textarea name= "msg" id= "msg" placeholder= "input" autofocus></ textarea> 
<button type= "Submit" > Submit </button><span> Press "Ctrl+enter" key to submit </span> 

Css
Simply write a few lines of CSS, decorate the TEXTAREA input box, button submit buttons, and display the content after submission. Post style.

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
You must first load the jquery library beforehand.

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

Let's write a simple plugin ctrlenter () with two parameters, the first parameter Btns The element that represents the plug-in, and the second parameter, FN , represents the function that is called. We add function performaction () to the plug-in to ensure that the plug-in is called internally. The plugin then starts to listen for keyboard events, and when you press a key in the KeyDown keyboard, it is determined that if you press the ENTER key and the CTRL key, the Performaction () is invoked and the default carriage return wrap behavior is blocked. Then we should also tie the Click event Call Performaction () on the button, so that you can also submit the content by clicking it.

$.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 = = && e.ctrlkey) { 
      performaction (e); 
      E.preventdefault (); Block default carriage return newline 
    } 
   }); 
   Btns.bind ("click", Performaction); 
} 

Finally, call Ctrlenter, commit the contents of the textarea to the #result, replace the carriage return with BR, and empty the textarea. Of course, the actual application, the content should be post to the background processing program, so that the background program, such as PHP processing 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 Submission form method, we have a clear idea, I hope this article for everyone's learning help.