jquery实现Ctrl+Enter提交表单代码

时间：2022-11-14 22:03:29 编辑：袖梨来源：一聚教程网

HTML

我们在页面body中，放置一个textarea输入框，一个提交按钮button，以及展示提交后的结果div#result。

代码如下

复制代码

可按“Ctrl+Enter”键提交

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库。

代码如下	复制代码

我们来编写一个简单的插件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); }

完整实例

代码如下

复制代码

演示：使用Ctrl+Enter提交表单

推荐专题

最新下载

热门教程

jquery实现Ctrl+Enter提交表单代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程