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中string 的replace
Apr 12 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript实现控制div颜色
Jul 07 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 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
PHP文件上传操作实例详解
2016/09/27 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
react路由配置方式详解
2017/08/07 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python操作xml文件详细介绍
2014/06/09 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
大学生毕业自荐信
2013/10/10 职场文书
好的促销活动方案
2014/08/21 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2014年化验员工作总结
2014/11/18 职场文书
小学生交通安全寄语
2015/02/27 职场文书
书法社团活动总结
2015/05/07 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
python绘制云雨图raincloud plot
2022/08/05 Python