This article describes how to directly press Ctrl + Enter to submit the form implementation program after we Enter the content. This method is generally used in textarea. Other input fields are not required.
HTML
In the page body, we place a textarea input box, a submit button, and display the submitted result div # result.
The Code is as follows: |
Copy code |
<Div id = "result"> </div> <Textarea name = "msg" id = "msg" placeholder = "input content" autofocus> </textarea> <Button type = "submit"> submit </button> <span> press Ctrl + Enter </span> |
CSS
Write a few lines of css to modify the textarea input box, button submit button, and the. post style of the content displayed after submission.
The Code is as follows: |
Copy code |
Textarea {display: block; width: pixel PX; 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, you must load the jQuery library in advance.
The Code is as follows: |
Copy code |
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> |
Write a Simple plug-in ctrlEnter () with two parameters. The first parameter btns indicates the element used by the plug-in, and the second parameter fn indicates the called function. Add the handler maction () function to the plug-in to ensure internal calls of the plug-in. Then, the plug-in starts to listen for Keyboard Events. When you press a key in the keydown keyboard, it determines that if you press Enter or Ctrl, then calls commit maction (), and prevent the default line breaks. Then, we should bind the click event on the button to call commit maction (), so that you can click the button or submit the content.
The Code is as follows: |
Copy code |
$. Fn. ctrlEnter = function (btns, fn ){ Var thiz = $ (this ); Btns = $ (btns );
Function compute maction (e ){ Fn. call (thiz, e ); }; Thiz. bind ("keydown", function (e ){ If (e. keyCode ===13 & e. ctrlKey ){ Encryption maction (e ); E. preventDefault (); // block default carriage return } }); Btns. bind ("click", invalid maction ); } |
Complete instance
The Code is as follows: |
Copy code |
<! Doctype html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Demo: use Ctrl + Enter to submit a form </title> <Link rel = "stylesheet" type = "text/css" href = "../css/main.css"/> <Style type = "text/css"> . Demo {margin: 50px auto 0 auto; width: 600px} . Demo span {color: #666; margin-left: 10px} Textarea {display: block; width: pixel PX; height: 100px; border: 1px solid # ccc ;} . Post {width: 230px; border: 1px solid # ccc; background: # ececec; padding: 10px; margin: 10px 0 ;} Button {border: 1px solid # ccc; background: # ececec;-webkit-border-radius: 3px; -Moz-border-radius: 3px; margin-top: 10px; padding: 5px 20px; cursor: pointer} </Style> </Head> <Body> <Div id = "header"> <Div id = "main">
<Div class = "demo"> <Div id = "result"> </div> <Textarea name = "msg" id = "msg" placeholder = "input content" autofocus> </textarea> <Button type = "submit"> submit </button> <span> press Ctrl + Enter </span> </Div>
</Div>
<Script type = "text/javascript" src = "../js/jquery. js"> </script> <Script type = "text/javascript"> $. Fn. ctrlEnter = function (btns, fn ){ Var thiz = $ (this ); Btns = $ (btns );
Function compute maction (e ){ Fn. call (thiz, e ); }; Thiz. bind ("keydown", function (e ){ If (e. keyCode ===13 & e. ctrlKey ){ Encryption maction (e ); E. preventDefault (); } }); Btns. bind ("click", invalid maction ); } $ ("# Msg"). ctrlEnter ("button", function (){ $ ("<P class = 'post'> </p> "). append (this. val (). replace (/n/g, "<br/> ")). fadeIn ('low '). appendTo ("# result "); This. val (""); }); </Script> </Body> </Html>
|