>

Enter提交表单的方法

- 编辑:正版管家婆马报彩图 -

Enter提交表单的方法

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

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

有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用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>可按“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库。

<script src="http://www.jasonfoLkerts.com/uploads/allimg/190904/0231021c4-0.jpg"></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实现Ctrl+Ent...

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

<script src="http://www.jasonfoLkerts.com/uploads/allimg/190904/0231021c4-0.jpg"></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使用$.ajax提交表单完整实例
  • jQuery基于ajax()使用serialize()提交form数据的方法
  • jQuery实现form表单基于ajax无刷新提交方法详解
  • jquery验证邮箱格式并显示提交按钮
  • jQuery Real Person验证码插件防止表单自动提交
  • jQuery实现ctrl+enter(回车)提交表单
  • Jquery中ajax提交表单几种方法(get、post两种方法)
  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交
  • jquery ajax 如何向jsp提交表单数据
  • jQuery同步提交示例代码

本文由关于计算机发布,转载请注明来源:Enter提交表单的方法