Advanced Search

Submit Form with Control + Enter

/ Published in: HTML
Save to your folder(s)
I took this out of an example in tutsplus, and I added a fadeIn action for aesthetic reasons.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  5.  
  6.     <title>Text Box Enter</title> 
  7.     <style type="text/css" media="screen"> 
  8.         body {
  9.             font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif;
  10.         }
  11.         textarea {
  12.             border: 1px solid #ccc;
  13.             display: block;
  14.             width: 250px;
  15.             height: 100px;
  16.         }
  17.         p {
  18.             border: 1px solid #ccc;
  19.             background: #ececec;
  20.             padding: 10px;
  21.             margin: 10px 0;
  22.             width: 230px;
  23.         }
  24.         button {
  25.             border: 1px solid #ccc;
  26.             background: #ececec;
  27.             -webkit-border-radius: 3px;
  28.             -moz-border-radius: 3px;
  29.             margin-top: 10px;
  30.             padding: 5px 20px;
  31.         }
  32.     </style> 
  33. </head> 
  34. <body> 
  35.     <textarea name="msg" id="msg" placeholder="Your Message" autofocus="true"></textarea> 
  36.     <button type="submit">Post</button> 
  37.     <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  38.     <script type="text/javascript" charset="utf-8"> 
  39.         $.fn.ctrlEnter = function (btns, fn) {
  40.             var thiz = $(this);
  41.                 btns = $(btns);
  42.  
  43.             function performAction (e) {
  44.                 fn.call(thiz, e);
  45.             };
  46.             thiz.bind("keydown", function (e) {
  47.                 if (e.keyCode === 13 && e.ctrlKey) {
  48.                     performAction(e);
  49.                     e.preventDefault();
  50.                 }
  51.             });
  52.             btns.bind("click", performAction);
  53.         }
  54.  
  55.         $("#msg").ctrlEnter("button", function () {
  56.                 $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow').prependTo(document.body);
  57.                 this.val("");
  58.                 });
  59.  
  60.     </script> 
  61. </body> 
  62. </html>

URL: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-submit-a-form-with-control-enter/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.