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 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
js实现双色球效果
2020/08/02 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python静态方法实例
2015/01/14 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
独特的python循环语句
2016/11/20 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python 自定义对象的打印方法
2019/01/12 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python下载的库包存放路径
2020/07/27 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
社区平安建设汇报材料
2014/08/14 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
防汛通知
2015/04/25 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python