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

作者：袖梨 2022-11-14

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提交表单

相关文章

精彩推荐