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 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
Node.js实现数据推送
Apr 14 Javascript
canvas绘制多边形
Feb 24 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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
php横向重复区域显示二法
2008/09/25 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python复制文件代码实现
2013/12/23 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python中list常用操作实例详解
2015/06/03 Python
python中map()与zip()操作方法
2016/02/27 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
解决Django中多条件查询的问题
2019/07/18 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
励志演讲稿大全
2014/08/21 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
民事纠纷协议书
2016/03/23 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
netty 实现tomcat的示例代码
2022/06/05 Servers