微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用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。

rush:xhtml;">

CSS

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

rush:css;"> 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库。

rush:js;">

原文地址:https://www.jb51.cc/jquery/52031.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐