使用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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python urlopen 使用小示例
2008/09/06 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python常用的json标准库
2019/02/19 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python 经典数字滤波实例
2019/12/16 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
安全检查验收制度
2014/01/12 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
读书小明星事迹材料
2014/05/03 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Java spring定时任务详解
2021/10/05 Java/Android
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis