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之自定义类型
May 04 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 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
人族 Terran 基本策略
2020/03/14 星际争霸
第十二节 类的自动加载 [12]
2006/10/09 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php session的应用详细介绍
2017/03/22 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python连接mongodb密码认证实例
2018/10/16 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python中生成ndarray实例讲解
2021/02/22 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
保险专业大专生求职信
2013/10/26 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
工程质量月活动方案
2014/02/19 职场文书
商务英语求职信范文
2015/03/19 职场文书
基层党建工作简报
2015/07/21 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
导游词之南京中山陵
2019/11/27 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
mysql主从复制的实现步骤
2021/10/24 MySQL
React四级菜单的实现
2022/04/08 Javascript