web前端|js教程
jquery提交form表单,jquery表单提交,jquery回车提交表单,jquery异步提交表单
web前端-js教程
有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。
一个点菜系统的安卓源码,vscode连接手机,Ubuntu类似cmder,tomcat 历史漏洞,sqlite加载数据文件,前端左菜单的框架一般放哪,影刀抓数据涉及爬虫吗,mysql php登陆,合肥seo网页设计,网站加头部背景代码,悬浮网页左侧,flash动画贺卡制作模板lzw
我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按住键盘上的Ctrl+Enter键，即可提交表单，完成内容发布。
当然，由于输入框是一个多行文本输入框textarea，我们知道，在textarea中按Enter(回车)键可以换行，并不能直接提交表单(submit)，而默认情况下，浏览器忽略了Ctrl键。那么我们可以通过Javascript脚本来控制使用Ctrl+Enter键来组合完成表单提交，本文结合示例讲解基于jQuery的Ctrl+Enter提交表单效果。
HTML
我们在页面body中，放置一个textarea输入框，一个提交按钮button，以及展示提交后的结果div#result。
mvc 登陆源码下载,vscode横线,ubuntu rom制作,释放tomcat,sqlite语法下载,phpcms换服务器,js excel插件开发,前端电脑开发框架,golang 并发爬虫,php和node,seo方法有哪些,网站授权代码,网页布局设计代码,会员后台模板,App加首页滑动页面,个人信息管理系统开源,人事管理系统 源程序lzw
可按“Ctrl+Enter”键提交
CSS
简单的写几行css，修饰textarea输入框、button提交按钮以及提交后显示内容的.post样式。
娱乐整套源码,vscode扩展最佳方案,Ubuntu循环任务,tomcat运行显示证书,爬虫 旅游,php的配置文件在哪,烟台seo推广前景,知识类织梦网站模板,jsp商城框架模板lzw
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库。
我们来编写一个简单的插件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 () {$("
").append(this.val().replace(/\n/g, "
")).fadeIn(slow) .appendTo("#result");this.val(""); });
以上就是如何使用JQuery实现Ctrl+Enter提交表单的方法，大家有没有一个清晰的思路了，希望这篇文章对大家的学习有所帮助。
