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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
js计算精度问题小结
Apr 22 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
Vue路由权限控制解析
Nov 09 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python异常学习笔记
2015/02/03 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python 实现按对象传值
2019/12/26 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
Linux操作面试题
2015/02/11 面试题
中专毕业生自我鉴定
2013/11/21 职场文书
《去年的树》教学反思
2014/04/11 职场文书
计算机毕业生求职信
2014/06/10 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python