jquery实现Ctrl+Enter提交表单的方法

前端技术 2023/08/09 JavaScript

本文实例讲述了jquery实现Ctrl+Enter提交表单的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE HTML> 
<html> 
<head> 
 <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"> 
 <title>Text Box Enter</title> 
 <style type=\"text/css\" media=\"screen\"> 
 body {
  font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif;
 }
 textarea {
  border: 1px solid #ccc;
  display: block;
  width: 250px;
  height: 100px;
 }
 p {
  border: 1px solid #ccc;
  background: #ececec;
  padding: 10px;
  margin: 10px 0;
  width: 230px;
 }
 button {
  border: 1px solid #ccc;
  background: #ececec;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin-top: 10px;
  padding: 5px 20px;
 }
 </style> 
</head> 
<body> 
 <textarea name=\"msg\" id=\"msg\" placeholder=\"Your Message\" autofocus=\"true\"></textarea> 
 <button type=\"submit\">Post</button> 
 <script type=\"text/javascript\" charset=\"utf-8\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script> 
 <script type=\"text/javascript\" charset=\"utf-8\"> 
 $.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 === 13 && e.ctrlKey) {
   performAction(e);
   e.preventDefault();
  }
  });
  btns.bind(\"click\", performAction);
 }
 $(\"#msg\").ctrlEnter(\"button\", function () {
  $(\"<p class=\'post\'></p>\").append(this.val().replace(/\\n/g, \"<br/>\")).fadeIn(\'slow\').prependTo(document.body);
  this.val(\"\");
  });
 </script> 
</body> 
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/776

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案