广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    使用JQuery实现Ctrl+Enter提交表单

    2018-04-05 08:32:36 次阅读 稿源:互联网
    零七广告

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

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

    HTML

    我们在页面body中,放置一个textarea输入框,一个提交按钮button,以及展示提交后的结果div#result。

    1. <div id="result"></div> 
    2. <textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea>  
    3. <button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

    CSS

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

    1. textarea {display:blockwidth:450px;height:100px;border1px solid #ccc;} 
    2. button {border1px solid #cccbackground#ececec;-webkit-border-radius: 3px
    3. -moz-border-radius: 3px;margin-top10px;padding5px 20pxcursor:pointer
    4. .post{width230px;border1px solid #ccc;background#ecececpadding10pxmargin10px 0;} 

    jQuery

    首先必须预先载入jQuery库。

    1. <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(),这样就可以通过单击按钮也可以提交内容了。

    1. $.fn.ctrlEnter = function (btns, fn) { 
    2.      var thiz = $(this); 
    3.      btns = $(btns); 
    4.          
    5.      function performAction (e) { 
    6.          fn.call(thiz, e); 
    7.      }; 
    8.      thiz.bind("keydown"function (e) { 
    9.         if (e.keyCode === 13 && e.ctrlKey) { 
    10.             performAction(e); 
    11.             e.preventDefault(); //阻止默认回车换行 
    12.         } 
    13.      }); 
    14.      btns.bind("click", performAction); 

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

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

    好了,你现在可以去测试下效果了。

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

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

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告