Posted By

luizlopes on 07/19/11


Tagged

ajax javascript jquery submit enter twitter html5 ctrl


Versions (?)

Submit Form with Control + Enter


 / Published in: HTML
 

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

I took this out of an example in tutsplus, and I added a fadeIn action for aesthetic reasons.

  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>

Report this snippet  

You need to login to post a comment.