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

编辑：rootadmin

推荐整理分享使用JQuery实现Ctrl+Enter提交表单的方法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

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

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

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

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

本文链接地址:https://www.jiuchutong.com/biancheng/370421.html 转载请保留说明！

上一篇：jQuery多级手风琴菜单实例讲解(jquery手风琴折叠菜单)

下一篇：jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码(jquery右击事件)