HTML
我们在页面body中，放置一个textarea输入框，一个提交按钮button，以及展示提交后的结果div#result。
| 代码如下 | 复制代码 |
|
<div id="result"></div> <textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> <button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> |
|
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库。
| 代码如下 | 复制代码 |
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
|
我们来编写一个简单的插件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); } |
|
完整实例
| 代码如下 | 复制代码 |
|
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示：使用Ctrl+Enter提交表单</title> <body> <div id="main"> <script type="text/javascript" src="../js/jquery.js"></script> </body> |
|