A research on the reply of QQ space comment

Reprint Please specify: theviper http://www.cnblogs.com/TheViper

Comment Reply is a very common thing, but the major sites are implemented in different ways. There are basically two ways of

1.

Like Youku this most common, in the input box @ To reply to the person, in this way, the user can modify the @.

Sina Weibo is on this basis, pop-up friends menu. The benefit of this approach is that there is no need for any js,css processing compatibility.

2.

Like QQ space this, to reply to the entire deletion of people. The cock feels this way is better, but there are some compatibility details in this way, which will be explained in detail later.

In fact, QQ space this realization in effect is compatible with IE and modern browser, do very well. It's chrome.

Ie8

Ie7

IE6 will not film, too card, all know, finally this cock will attach the final example, of course, also compatible with IE6.

Let's talk about how it's going to come true.

First look at QQ space is how to do

Chrome

As can be seen above, QQ space is added in the button text, so when the deletion of the reply to the user name can be deleted the whole.

But this is not enough, the first is the style, you need to set the button to Inline-block,

Remove button default transparent background, border, and of course Padding,margin set to 0

    button{        border: 0;         Background:none;    }

At this point the insertion in the ie6,7 will find that there seems to be a padding, but also very large

So we need to add overflow:visible;

In addition, the property contenteditable is set to FALSE, otherwise the cursor jumps into the button,

And then in the IE8 will find that when the input if there is a carriage return, and then in the process of deleting, you will find the button label can not be deleted, the cursor will run to the button tag, and again press the right cursor key or click on the button label to the right of the button can not let the cursor run to the right. In fact, QQ space in the IE8 also have this problem

Ie8

And under the ie6,7, there's no such thing.

Ie7

Ie6

Here for IE8 need to bind to the text box KeyDown event callback check_comment, the ie6,7 binding also no problem, here is unified on IE binding.

        functionGetpositionfortextarea (ctrl) {//Get cursor Position            varCaretpos = 0; if(document.selection) {ctrl.focus (); varSel =Document.selection.createRange (); varSel2 =sel.duplicate ();                 Sel2.movetoelementtext (ctrl); varCaretpos =-1;  while(Sel2.inrange (Sel)) {Sel2.movestart (' Character '); Caretpos++; }             }Else if(Ctrl.selectionstart | | ctrl.selectionstart = = ' 0 ') {Caretpos=Ctrl.selectionstart; }             return(Caretpos); } vm.check_comment=function(e,i) {varA=getpositionfortextarea ($ (' reply ' +i)); if(e.keycode==8&&a<3){                    varPat =NewRegExp ("^<p><button. *?>.*?</button>&nbsp;</p>$", ' I '); if(Pat.test ( This. InnerHTML))  This. innerhtml= '; }            };

The cursor position <3 indicates that the button tag is in front of the cursor, so you can empty the input box. Note that in order to be rigorous, the regular expression is used to verify that the button tag is not.

In addition, in the regular expression of the button label outside the P tag, because IE when the carriage return when the line, will default automatically wrapped in the previous row P label. Of course, at the beginning of the input box also to wrap the P tag outside the button label.

Off Topic

QQ space on the FF with an IMG tag

Before always thought that QQ space in the modern browser unified with the IMG tag, write the time only found in chrome with the button tag, so in Chrome under the try to insert the IMG tag, find out how to get rid of the border, simply to Chrome also with the button tag.

Also in my case, the input box is not easy to get focus when inserting the button tag in ff. Ben is too lazy to change, is still inserted in the FF img tag, the corresponding KeyDown callback

                if (!! -[1,]&&e.keycode==8&&$ (' reply ' +i). childnodes.length==2) {//ffthis                     . innerhtml= ';                     return ;                }

Only the number of child nodes in the input box can be judged.

Final effect

Chrome

Ff

Ie8

Ie7

Ie6

Attached example Download

If you find the content of this article helpful to you, you can reward me with:

A research on the reply of QQ space comment