使用Control+Enter提交表单

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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(/
/g, "<br/>")).fadeIn('slow').prependTo(document.body);
  57.                 this.val("");
  58.                 });
  59.  
  60.     </script> 
  61. </body> 
  62. </html>

以上是关于使用Control+Enter提交表单的主要内容，如果未能解决你的问题，请参考以下文章

在 react-testing-library 中按 Enter 提交表单不起作用

使用 AngularJS 按 Enter 提交表单

表单提交成功，没有“Access-Control-Allow-Origin”控制台错误

除了提交按钮之外，还使用 ​​Enter 键提交 JQuery 表单

由于隐藏按钮，Enter 无法在 IE 中提交表单

在不使用 JavaScript 的情况下，如何在选择字段集中时使 Enter 键提交表单？