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

有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。

我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按住键盘上的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("");
}); 

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery提交form表单
jquery表单提交
enter提交表单、禁止enter键提交表单、html enter 表单提交、enter键提交表单、阻止enter键提交表单,以便于您获取更多的相关知识。

时间: 2024-11-03 16:55:01

使用JQuery实现Ctrl+Enter提交表单的方法_jquery的相关文章

jquery实现Ctrl+Enter提交表单的方法_jquery

本文实例讲述了jquery实现Ctrl+Enter提交表单的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Text Box Enter</title> <style type="

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

HTML 我们在页面body中,放置一个textarea输入框,一个提交按钮button,以及展示提交后的结果div#result.  代码如下 复制代码 <div id="result"></div>  <textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea>   <button type

让textarea支持ctrl+enter提交表单

让textarea支持ctrl+enter提交表单 1.让textarea支持ctrl+enter提交表单. 2.ctrl+enter提交表单之前,调用自己的验证函数,比如验证内容是否为空. 3.比如textarea是空的,我按ctrl+enter提交表单,会提示不要发空信息,似乎是正常的.可这时,会产生一个空行,再按一次,又会产生一个换行.我们就来解决这个问题. 表单代码: <form method="post" name="comment"> <

jQuery ajaxSubmit 实现ajax提交表单局部刷新_jquery

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

按Ctrl+Enter提交表单

 function   document.onkeydown()     {         if   (event.keyCode   ==   13   &&   event.ctrlKey)  if(checkemail_diaocha_ly())      document.form1.submit();     }     </script>

JavaScript实现CTRL+回车提交表单

javascript|提交表单 <script type="text/javascript"> //Ctrl+回车 提交表单 // 例: <textarea name="textarea" ></textarea> // 注意: Form 必须有 Name 或 ID      function submitForm(formID) {         if(window.event.ctrlKey&&window.

Javascript 函数: CTRL+回车 提交表单

javascript|函数|提交表单 <script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" ></textarea> // 注意: Form 必须有 Name 或 ID      function submitForm(formName) {         if(wind

Javascript中CTRL+回车提交表单

<script type="text/javascript"> //<![CDATA[ Javascript 函数: Ctrl+回车 提交表单 // 例: <textarea name="textarea" onKeyDown="submitForm(this.form.name)"></textarea> // 注意: Form 必须有 Name 或 ID function submitForm(for

js实现键盘Enter键提交表单的方法

  本文实例讲述了js实现键盘Enter键提交表单的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 //执行键盘按键命令 function keyDown(e){ var keycode = 0; //IE浏览器 if(CheckBrowserIsIE()){ keycode = event.keyCode; }else{ //火狐浏览器 keycode = e