使用Ctrl+Enter提交表单

资料来源：网络整理时间：2023/2/14 0:15:57 共计：3618 浏览

我们发表微博或论坛发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按住键盘上的Ctrl+Enter键，即可提交表单，完成内容发布。

当然，由于输入框是一个多行文本输入框textarea，我们知道，在textarea中按Enter(回车)键可以换行，并不能直接提交表单(submit)，而默认情况下，浏览器忽略了Ctrl键。那么我们可以通过Javascript脚本来控制使用Ctrl+Enter 键来组合完成表单提交，本文结合示例讲解基于jQuery的Ctrl+Enter提交表单效果。

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);  }

最后，调用ctrlEnter，将textarea中的内容提交到#result中，并且将回车替换为br，并且清空textarea。当然实际应用中，应该将内容post给后台处理程序，让后台程序(php等)处理内容及数据交互。

$("#msg").ctrlEnter("button", function () { 
       $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
       this.val("");  });

好了，你现在可以到demo中测试下效果了。

有同学说可以通过在表单form上直接绑定onkeydown来侦听鼠标事件，只需要一句代码如下：

<form onkeydown="if(event.ctrlKey&&event.keyCode==13)this.submit()">

执行以上代码后，可以通过按住Ctrl+Enter键实现提交表单，但貌似这种上述代码浏览器兼容性差，你还需要写一大段代码来解决浏览器的兼容性，所以直接使用jQuery版的吧。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：速度超快的菜单切换效果 | ·下一条：jQuery数字滚动展示效果