夏日博客

A-A+

WordPress中按Ctrl+Enter与回车提交留言

2016年02月16日 PHP开源系统 评论 5 条 阅读 14 views 次

实现的方法很简单，只需几行javascript就能搞定了。那么我们也在WordPress加上这个快捷键吧：

一、打开模板中的comments.php文件,查找到下面的内容,代码如下.

  1. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" name="commentform">  
  2. <?php if ( $user_ID ) : ?>  

如果你的form标签中没有name=”commentform”属性，那么请加上。

二、再往下拉一点，你可以看到类似的两行,代码如下:

  1. <p><textarea name="comment" id="comment" cols="55" rows="10" tabindex="4"></textarea></p>  
  2. <p><input type="submit" id="submit" tabindex="5" value="提交留言" /></p>  

如果textarea标签上没有id属性,请按照上面的内容加上,如果在第二行中发现name=”submit”,将之删除,如果你发现还是不行,把id=”submit”改为id=”submitit”,这样肯定是可以了.

三、最后，在form的下面，添加下面的一段javascript代码后保存就行了,代码如下:

  1. <script type="text/javascript><!--//--><![CDATA[//><!--  
  2.     var commenttextarea = document.getElementById('comment');  
  3.     commenttextarea.onkeydown = function quickSubmit(e) {  
  4.         if (!e) var e = window.event;  
  5.         if (e.ctrlKey && e.keyCode == 13){  
  6.             document.getElementById('submit').click();  
  7.         }  
  8.     };  
  9. //--><!]]>  
  10. </script>  

其它参考JQuery回车提交表单,代码如下:

  1. $("body").bind('keyup',function(event) {  
  2. if(event.keyCode==13){  
  3. document.form.submit();  
  4. }     
  5. });  

原理:为body添加keyup事件

不用jquery方式,代码如下:

  1. <body onkeyup="autosubmit()">//添加监听事件  
  2. function autosubmit(){//事件触发函数  
  3.   if(event.keyCode==13){  
  4.      document.form.submit();  
  5.   }     
  6. }  

js实现方法,代码如下:

  1. <form action=http://www.xiariboke.net method="post" name="myForm">   
  2. <input type="text" />   
  3. <input type="submit" value="提交" name="tijiao"><font color="#999999">按回车提交表单</font>   
  4. </form>   
  5. </body>   
  6. </html>   
  7. <script language="JavaScript" type="text/javascript">   
  8. document.onkeydown = function(evt){   
  9. var evt = window.event?window.event:evt;   
  10. if(evt.keyCode==13)   
  11. {   
  12. document.forms["myForm"].submit();   
  13. }   
  14. }   
  15. </script>  

如果想防止enter提交表单做页面的时候，就是监听表单的onkeydown事件，加上onkeydown="if(event.keyCode == 13) return false;" 就OK了

标签：

5 条留言  访客：5 条  博主：0 条

  1. 大学问社区 2016年02月18日 下午 6:00  -199楼  回复

    学习下

  2. boke112导航 2016年02月18日 下午 3:07  -198楼  回复

    这个功能不错，我平时都是习惯直接按提交按钮的

  3. 新成 2016年02月17日 下午 8:55  -197楼  回复

    用户体验呀

  4. FROYO 2016年02月17日 下午 5:47  -196楼  回复

    这个功能挺方便的，类似QQ的回复

  5. 叶疯子博客 2016年02月17日 下午 1:42  -195楼  回复

    很好 谢谢分享~

给我留言