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

前端之家收集整理的这篇文章主要介绍了使用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(),其中带两个参数,第

表示插件作用的元素,

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

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等处理内容及数据交互。

PHP;"> $("#msg").ctrlEnter("button",function () { $("

").append(this.val().replace(/\n/g,"
")).fadeIn('slow') .appendTo("#result"); this.val(""); });

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

猜你在找的jQuery相关文章