使用JQuery实现Ctrl+Enter提交表单的方法


Posted in Javascript onOctober 22, 2015

有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。

我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按住键盘上的Ctrl+Enter键,即可提交表单,完成内容发布。
当然,由于输入框是一个多行文本输入框textarea,我们知道,在textarea中按Enter(回车)键可以换行,并不能直接提交表单(submit),而默认情况下,浏览器忽略了Ctrl键。那么我们可以通过Javascript脚本来控制使用Ctrl+Enter键来组合完成表单提交,本文结合示例讲解基于jQuery的Ctrl+Enter提交表单效果。
HTML
我们在页面body中,放置一个textarea输入框,一个提交按钮button,以及展示提交后的结果div#result。

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span>

CSS
简单的写几行css,修饰textarea输入框、button提交按钮以及提交后显示内容的.post样式。

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;}

jQuery
首先必须预先载入jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

我们来编写一个简单的插件ctrlEnter(),其中带两个参数,第一个参数btns表示插件作用的元素,第二个参数fn表示调用的函数。我们在插件中加入函数performAction()来确保插件内部调用。接着插件开始侦听键盘事件,当按下keydown键盘中的某个键时,判断如果按下的是Enter(回车)键和Ctrl键,则调用performAction(),并阻止默认的回车换行行为。然后我们还应该在button上绑定click事件调用performAction(),这样就可以通过单击按钮也可以提交内容了。

$.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); 
}

最后,调用ctrlEnter,将textarea中的内容提交到#result中,并且将回车替换为br,并且清空textarea。当然实际应用中,应该将内容post给后台处理程序,让后台程序php等处理内容及数据交互。

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
});

以上就是如何使用JQuery实现Ctrl+Enter提交表单的方法,大家有没有一个清晰的思路了,希望这篇文章对大家的学习有所帮助。

Javascript 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
浅析javascript函数表达式
Feb 10 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
JS实现打砖块游戏
Feb 14 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 #Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 #Javascript
使用jquery插件qrcode生成二维码
Oct 22 #Javascript
JavaScrip调试技巧之断点调试
Oct 22 #Javascript
浅析JavaScript 调试方法和技巧
Oct 22 #Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 #Javascript
浅谈node.js中async异步编程
Oct 22 #Javascript
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
python字符类型的一些方法小结
2016/05/16 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python爬虫要用到的库总结
2020/07/28 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
安全生产检讨书
2014/01/21 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
考研英语辞职信
2015/05/13 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Python函数对象与闭包函数
2022/04/13 Python