为 WordPress 添加 Ctrl+Enter 快捷回复

最近,有些童鞋反映希望 Melody 能添加一个使用 Ctrl+Enter 进行快捷回复的功能。的确,在各大论坛以及我们常用的 QQ 上,都是使用 Ctrl+Enter 快捷键进行回复的,但因为 Kayo 并不常常使用这个功能,因而并没有添加这个功能到 Melody ,而今天心淡若水童鞋再次提醒 Kayo 需要这个功能,于是我马上添加这个功能到 Melody 。

 

这里送上两种方法,首先是 jQuery 方法,前段时间一直在研究 jQuery ,因此对 jQuery 方法比较熟悉,如果你的主题本来已经加载 jQuery 库,建议你使用下面的方法。

 

把这段代码加入 js 文件中,如果你已经加载 jQuery ,现在就可以使用 Ctrl+Enter 进行快捷回复。

jQuery(document).ready(function($){                   
//Ctrl+Enter回复
    jQuery(document).keypress(function(e){
        if(e.ctrlKey && e.which == 13 || e.which == 10) {
            jQuery("#commentform").submit();
        }
    })
});

 

解释一下代码,在 chrome 等现代浏览器中, js 是使用 e.which ==13 判断 Enter ,在 ie6 中, js 是使用 e.which ==10 判断 Enter 。

 

另一种方法是使用原生的 js ,在 Kayo 学习 jQuery 后,对原生 js 也产生了兴趣,于是上网订购了一本《JavaScript权威指南》,话说这书竟然有 900 多页,虽然有 300 多页是附录,但要看完也不容易, Kayo 当然不会全部看完才实践啦,于是利用一点 js 知识,折腾了 Ctrl+Enter 回复的 js 版,如果你的网站本来没有加载 jQuery 库,使用以下方法就比较方便。

 

在 comments.php 中找到一段类似以下代码(即评论框的代码),

<textarea name="comment" id="comment" rows="10" cols="50" tabindex="4"></textarea>

 

替换为以下的一段代码:

<textarea name="comment" id="comment" rows="10" cols="50" tabindex="4" onkeydown="if(event.ctrlKey&&event.keyCode==13 || Key&&event.keyCode==10){document.getElementById('submit').click();return false};"></textarea>

 

实现 Ctrl+Enter 快捷回复的原理跟 jQuery 版的差不多,这里就不作详细解释了。具体的效果,各位童鞋回复一下本文就知道了!

 

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/ctrl-and-enter-to-submit.html

评论列表

  • 评论者头像
    回复

    学习了~试试看~

  • 评论者头像
    回复

    这个后台好像有 上次看见了

  • 评论者头像
    回复

    先试一试吧

  • 评论者头像
    回复

    唉,算了,这个功能还是省了吧!

    • 评论者头像
      回复

      @何静稔 加入这个功能既能方便用户,也能方便自己,试试无妨噢!

  • 评论者头像
    回复

    我使用的主题,有这个折腾,省去了折腾的功夫,O(∩_∩)O哈哈~

  • 评论者头像
    回复

    很多博客都有这个功能

  • 评论者头像
    回复

    很早就用这功能来

  • 评论者头像
    回复

    嘿嘿,我的主题上的这功能也是自己折腾的~~

  • 评论者头像
    回复

    这个不错,我来试试

  • 评论者头像
    回复

    来测试一下

  • 评论者头像
    回复

    嗯,好用

  • 评论者头像
    回复

    今天发现一个大神!!

  • 评论者头像
    回复

    我发现我不能用这个代码,要把jQuery("#commentform").submit();改为jQuery("#submit").click();

    • 评论者头像
      回复

      @Youth.霖 是不是你的 comment form id 不是 commentform。复用代码时不能直接套,需要了解背后含义噢!

      • 评论者头像
        回复

        @Kayo 不是啊,我的是&lt: form action=”~wp-comments-post.php” method=”post” id=”commentform”>
        (“#commentform”)应该能选啊

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail