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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
js实现简单的无缝轮播效果
Sep 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python unittest框架操作实例解析
2020/04/13 Python
python excel多行合并的方法
2020/12/09 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
幼儿园小班教学反思
2014/02/02 职场文书
生日庆典策划方案
2014/06/02 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
无保留意见审计报告
2015/06/05 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript