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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JavaScript File分段上传
Mar 10 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
angular.js实现列表orderby排序的方法
Oct 02 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
小程序实现分类页
Jul 12 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python实现数据图表
2017/07/29 Python
python使用Tesseract库识别验证
2018/03/21 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python实现坦克大战
2020/04/24 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
社会保险接收函
2014/01/12 职场文书
小学生暑假感言
2014/02/06 职场文书
文员岗位职责范本
2014/03/08 职场文书
住房抵押登记委托书
2014/09/27 职场文书
党员带头倡议书
2015/04/29 职场文书
数学备课组工作总结
2015/08/12 职场文书