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 相关文章推荐
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
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之第二天
2006/10/09 PHP
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
表单内同名元素的控制
2006/11/22 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
销售总监工作职责
2013/11/21 职场文书
校长就职演讲稿
2014/01/06 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
家长寄语大全
2014/04/02 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
红色革命电影观后感
2015/06/18 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL