Use jquery to implement Ctrl+enter and @ comment responses in WordPress _jquery

Add Ctrl+enter Quick Reply
here are two methods, the first is the jquery method, the previous period has been studying jquery, so the jquery method is more familiar, if your theme has already loaded jquery library, suggest you use the following method.

Add this code to the JS file, and if you've loaded JQuery, you can now use Ctrl+enter for a quick reply.

jquery (document). Ready (function ($) {          
//ctrl+enter reply to
  jquery (document). KeyPress (function (e) {
    if ( E.ctrlkey && E.which = 13 | | E.which = =) {
      jQuery ("#commentform"). Submit ();}})
;

Explain the code, in Chrome and other modern browsers, JS is using E.which ==13 to judge enter, in IE6, JS is using E.which ==10 to judge enter.

Another method:
Find a section of code similar to the following code (that is, the comment box) in comments.php.

<textarea name= "comment" id= "comment" rows= "ten" cols= "4" ></textarea>

Replace with the following piece of code:

<textarea name= "comment" id= "comment" rows= "cols=" "tabindex=" 4 "onkeydown=" if (event.ctrlkey&& event.keycode==13 | | key&&event.keycode==10) {document.getElementById (' Submit '). Click (); return false}; " ></textarea>

The principle of ctrl+enter quick reply is similar to that of the JQuery version, which is not explained in detail here.

Implement @ Reply
in reply with the "@" function we should not unfamiliar, in micro-blog, BBS can see the "@" figure, even Tencent's Qzone also joined the "@ reply" function. Indeed, the "@ reply" makes the object of the reply clearer and more obvious for multiple responses.

However, WordPress's comment template does not have this feature, so we need to manually add in, in fact, this feature in WordPress has been more popular, many themes have this function, the principle of implementation are many, and I introduced in this article is the method of jQuery implementation , because most of the articles circulated on the Internet are directly to the JQuery code, there is no detailed explanation, and different Web site DOM is not necessarily the same, so not familiar with jquery's children's shoes when using jquery to implement the "@ reply" may appear various problems.

1. Load JQuery Library, you can use Google directly.

2. JQuery code, can be placed directly into the JS file.

JQuery (document). Ready (function ($) {
$ ('. Comment-reply-link '). Click (function () {
   //Get the ID of the reply
   var Atid = ' # ' + $ (this). Parent (). Parent (). attr ("id") + ' ";
   Gets the nickname
  var atname = $ (this) for the reply. Parent (). Find ('. Comment_author '). Text ();
$ ("#comment"). attr ("value", "<a href=" + Atid + ">@" + atname + "</a>"). focus ();
};
$ (' #cancel-comment-reply a '). Click (function () {
$ ("#comment"). attr ("Value", "");});

3. Explain the JQuery code

In implementing @ Reply, the key is to get the ID and nickname of the object you want to reply to, so you define two quantity Atid, Atname, to save the ID and nickname of the object you want to reply to. When the user clicks the. Comment-reply-link, jquery takes the id attribute of its level two parent element, saves it in Atid, and then looks for it in the child element of its parent element. Comment_author, and gets its contents stored in Atname. Perhaps the above description is more difficult to understand, and then use the picture to explain!

To get a user ID, you first need to understand the DOM structure of the comment section, taking Melody as an example, and using Firebug to view part of the HTML of one of its comments,

Look at the picture believe that children's shoes should probably understand,. Comment-reply-link's Level Two parent element contains the ID of the person who replied, so you can get the ID of the person who replied, and the user's nickname is included in the. Comment-reply-link's peer element. See here believe that the children's shoes to see the above JQuery code should not be difficult to understand!

We should first know where our comment template has the ID of the output person, where there is a nickname for the output person, and then use the JQuery selector to get the relevant data.