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

2019-12-18,,,,,

本文实例讲述了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.lug.ustc.edu.cn/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程序设计有所帮助。

您可能感兴趣的文章:

  • jquery ajax提交表单数据的两种方式
  • jQuery ctrl+Enter shift+Enter实现代码
  • jquery ajax提交表单数据的两种实现方法
  • jquery下异步提交表单 异步跨域提交表单
  • JQuery通过Ajax提交表单并返回结果
  • jQuery Ajax提交表单查询获得数据实例代码
  • 解决jquery submit()提交表单提示:f[s] is not a function
  • jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
  • jquery ajax提交表单从action传值到jsp实现小结
  • jQuery ajax中使用serialize()方法提交表单数据示例
  • Jquery.Form 异步提交表单的简单实例
  • jQuery使用ajaxSubmit()提交表单示例
  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
  • jquery动态改变form属性提交表单
  • 详解jquery中$.ajax方法提交表单
  • jquery+ajax验证不通过也提交表单问题处理
  • jquery ajax 如何向jsp提交表单数据
  • Jquery中ajax提交表单几种方法(get、post两种方法)
  • jQuery实现ctrl+enter(回车)提交表单
  • 使用JQuery实现Ctrl+Enter提交表单的方法

《jquery实现Ctrl+Enter提交表单的方法.doc》

下载本文的Word格式文档,以方便收藏与打印。