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


Posted in Javascript onJuly 21, 2015

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

Javascript 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
jQuery实现html元素拖拽
Jul 21 #Javascript
异步安全加载javascript文件的方法
Jul 21 #Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 #Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 #Javascript
SWFObject基本用法实例分析
Jul 20 #Javascript
jQuery.prop() 使用详解
Jul 19 #Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 #Javascript
You might like
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python实现人民币大写转换
2018/06/20 Python
浅析Python函数式编程
2018/10/06 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
用pycharm开发django项目示例代码
2018/10/24 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
班级口号大全
2014/06/09 职场文书
绿色环保倡议书
2015/04/28 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书