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修改CSS属性的代码
May 06 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jquery easyui使用心得
Jul 07 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 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
实用函数4
2007/11/08 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue的mixins属性详解
2018/03/14 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python使用PyQt5的简单方法
2019/02/27 Python
python sorted函数的小练习及解答
2019/09/18 Python
python next()和iter()函数原理解析
2020/02/07 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
新大陆软件面试题
2016/11/24 面试题
邮政员工辞职信
2014/01/16 职场文书
外贸专业求职信
2014/03/09 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android