冰古blog » wordpress » 2008 » 05 » 30 » WordPress中用Ctrl+Enter提交留言

WordPress中用Ctrl+Enter提交留言

由于某些软件和论坛的缘故,很多时候冰古blog上写完留言回复后,都习惯性地按下Ctrl+Enter进行提交留言,但基本上是不成功的,很多blog程序都没有加入这样的快捷键

Discuz等论坛都可以使用快捷键提交发贴和发贴,但因为觉得它们的代码太麻烦,所以一直没有去查找该快捷键的方法。直到有次在百度知道回复时,按下Ctrl+Enter提交竟然成功了,才打开它的源代码查看了下。一看才知道,实现的方法很简单,只需几行javascript就能搞定了。那么我们也在WordPress加上这个快捷键吧:

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

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

如果你的form标签中没有name=”commentform”属性,那么请加上。
二、再往下拉一点,你可以看到类似的两行:

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

如果textarea标签上没有id属性,请按照上面的内容加上。如果在第二行中发现name=”submit”,将之删除。如果你发现还是不行,把id=”submit”改为id=”submitit”,这样肯定是可以了。
三、最后,在</form>的下面,添加下面的一段javascript代码后保存就行了。

<script type="text/javascript">
var commenttextarea = document.getElementById('comment');
commenttextarea.onKeyDown = quickSubmit(event);
function quickSubmit(event){
  if (event.ctrlKey && event.keyCode == 13){
    document.submitform.submit();
  }
}
</script>

貌似上面这句我搞错了document.submitform.submit();,顺便把代码兼容性弄好点,用上下面的代码,应该没问题了。

<script type="text/javascript">
var commenttextarea = document.getElementById('comment');
commenttextarea.onkeydown = function quickSubmit(e) {
  if (!e) var e = window.event;
  //alert(e.keyCode);
  if (e.ctrlKey && e.keyCode == 13){
    //alert('good');
    document.getElementById('commentform').submit();
  }
};
</script>

20090619新版本

<script type="text/javascript><!--//--><![CDATA[//><!--
    var commenttextarea = document.getElementById('comment');
    commenttextarea.onkeydown = function quickSubmit(e) {
        if (!e) var e = window.event;
        if (e.ctrlKey && e.keyCode == 13){
            document.getElementById('submit').click();
        }
    };
//--><!]]></script>

试试吧。

BTW:google换了favicon?google/谷歌 favicon

67 Responses to “WordPress中用Ctrl+Enter提交留言”

  1. […] 原文链接:http://bingu.net/512/wordpress-hack-use-ctrl-enter-submit-comment/ […]

  2. […] 原文链接:http://bingu.net/512/wordpress-hack-use-ctrl-enter-submit-comment/ widget […]

  3. […] A:那是用 js 寫的, 不是用 css, 可先看冰古的這篇偉大的文章: http://bingu.net/512/wordpress-h … ter-submit-comment/ 小妞,不要忘记,俺们共同努力,一起进步哦。 上一篇: […]

  4. neverno says:

    奇怪的现象,我试过IE浏览器可以,可是FF chrome却不行,晕倒~折腾了很久也不行。

  5. 阿萨德 says:

    测试

  6. Jessy says:

    试试看你的效果

  7. sky says:

    哈哈,不错啊,我的也是这样实现了的

  8. iSayme says:

    晕,手一顺,鼠标单击按钮了……
    测试好像代码不支持chrome哦~

  9. iSayme says:

    测试博主的代码兼容chrome否~~~

  10. hg says:

    你好,我们

  11. 杨董 says:

    挺实用的办法 符合QQ用户习惯

  12. 倡萌 says:

    呵呵,我也是逛多论坛了,所以很习惯快捷发评论, 但是照你说的,很多博客都没有这样的功能,包括我的,所以过啦取点经回去弄弄 哈哈哈哈 似乎你的也不行??

  13. wayne says:

    ctrl回车
    …没用嘛。。。

  14. WSQ says:

    type=”text/javascript漏了關閉的”

    //–>

  15. […] 2009年3月28日补充:发现这里比我写的更详细,想对代码详细了解的请看这:《WordPress中用Ctrl+Enter提交留言》  […]

  16. […] 所以我觉得博客的留言也最好是能加上这么个功能。在wordpress中加上这个功能很简单,我找了2篇文章,没有加这功能的童鞋赶紧去补上,呵呵: WordPress中用Ctrl+Enter提交留言 […]

  17. ond says:

    恩 研究研究

  18. 初来 says:

    🙂 非常感谢博主分享的代码,在静态HTML页面上试了一下,貌似提交元素里有name属性也没关系,Opera也可以提交

  19. […] 2009年3月28补充:发现这里比我写的更详细,想对代码详细了解的请看这:《WordPress中用Ctrl+Enter提交留言》 2008年12月15日代码,快捷留言,评论 WordPress […]

  20. tiancool says:

    我测试成功了,但什么是AJAX效果? 😳

  21. RisingSun says:

    恩,学习了,哈,可以实现,不介意我把你的文章转载吧,我会注名出处的,你放心 😆

  22. […] 原文链接:http://bingu.net/512/wordpress-hack-use-ctrl-enter-submit-comment/ […]

  23. Geedr.com says:

    成功了,谢谢您的方案 😀

  24. aunsen says:

    我也成功了,不过没有AJAX效果了,郁闷,怎么解决? 😥

  25. 沿阶草 says:

    失败了,不知道是不是和Ajax评论插件冲突,另寻了。。 😐

  26. 沿阶草 says:

    通过谷歌搜来的,头条就是这。老早订阅了你的文章。

  27. Leeiio says:

    我是來測試的~

  28. 冰古 says:

    @阿企 我也不知道是不是会跟插件冲突,因为太多插件了。
    其实之前和之后,问题不大,只要整个页面都载入了就没问题的。

  29. 阿企 says:

    发现致命错误
    js代码应该放在之前,然后成功

  30. 阿企 says:

    没有成功,怀疑跟插件有冲突

  31. […] 同志们去找篇文章增加一个留言,然后直接Ctrl+Enter体验即可…感谢冰古童鞋滴代码. […]

  32. 冰古 says:

    恭喜恭喜 :mrgreen:

  33. asiapan says:

    成功了,哈哈 🙂

  34. 冰古 says:

    关键是那个submit那个按键不能有name这个属性,我看了你的源代码,发现是有这个属性的。

    如果还不行,你可以看一下我的源代码。

    如果要发代码,用code标签就可以了

  35. asiapan says:

    上面一条代码消失了一大部分,抱歉不知道怎么在留言里贴代码

  36. asiapan says:

    我的第二部分代码是这样的:

    <input type=”hidden” name=”comment_post_ID” value=”” />

    会不会有问题?

  37. asiapan says:

    我在自己的blog上修改测试没成功,在你这里试验一下

  38. 成功了,不错!@谢谢

  39. 冰古 says:

    @phy 这个按照说明来做吧,我看不到你的网页代码那些,我也不知道原因啊。

  40. phy says:

    天啊!Failed…

    这是为什么呢?

    这里却可以…Ctrl+Enter… 🙁

  41. 冰古 says:

    @花果山寨 你的html代码是怎样的呢?我无法得知你的html代码是怎样的,也就无从知道是什么导致不能使用。

  42. 花果山寨 says:

    启用了回复插件会不会影响这个功能的实现,我在本地调试没办法实现ctrl+enter 提交

  43. 花果山寨 says:

    咦!怎么不行呢?我可是按你的说明一步一步弄的哦!

  44. 花果山寨 says:

    太好了,我试试!

  45. 冰古 says:

    标准不是唯一,适合才是真的。

    大家的习惯都是用ctrl+enter,而且这也更顺手。

  46. 梵尚 says:

    其实标准的应该是ALT+S
    感觉使用accesskey属性应该就可以了

  47. 冰古 says:

    :mrgreen: discuz也是可以用ctrl+enter提交的。

  48. Charles says:

    呵呵,挺不错的,这个有点像QQ了。

  49. […]   WordPress中用Ctrl+Enter提交留言。让WordPress的留言框支持使用”Ctrl+Enter”快捷提交留言。 由于某些软件和论坛的缘故,很多时候冰古在blog上写完留言回复后,都习惯性地按下Ctrl+Enter进行提交留言,但基本上是不成功的,很多blog程序都没有加入这样的快捷键。 Discuz等论坛都可以使用快捷键提交发贴和发贴,但因为觉得它们的代码太麻烦,所以一直没有去查找该快捷键的方法。直到有次在百度知道回复时,按下 Ctrl+Enter提交竟然成功了,才打开它的源代码查看了下。一看才知道,实现的方法很简单,只需几行javascript就能搞定了。那么我们也在WordPress加上这个快捷键吧: […]

  50. Leo says:

    🙂
    我也来测试一下

    FF3 RC2

  51. 冰古 says:

    用opera测试一下

  52. 冰古 says:

    再次测试一下。

  53. 我乐视频分享 says:

    😯 测试没成功。。。

  54. 冰古 says:

    奇怪了,怎么又不行了。
    过两天再搞搞。

  55. scavin says:

    试一下,这是个好功能

  56. 冰古 says:

    @limkianhui 哈,买域名了。

  57. limkianhui says:

    🙂 哇!這個暴強。

Leave a Reply