Perfect realization of imitation QQ space Comment reply effect

Source: Internet
Author: User
Tags regular expression

This article mainly introduces the perfect imitation QQ space comment reply effect, very practical, attached to the example code to everyone, the need for the reference of small partners.

Comment Reply is a very common thing, but the way that each big website realizes is different. There are basically two ways


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

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


Like QQ space this, to reply the person whole deletes. This is a better way to do this, but there are some compatibility details in this way, which will be explained later.

In fact, this realization of QQ space is compatible with IE and modern browsers in effect, doing very well. It's chrome up there.



IE6 is not on the picture, too card, all know, finally the cock will be attached to the final example, of course, compatible with IE6.

Let's talk about how to achieve it.

First look at QQ space is how to do


Above can be seen, QQ space is in the button to add text, so in the deletion of the user name can be restored to the entire deletion.

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

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

Copy code code as follows:

button{border:0; background:none;}

At this point in the ie6,7 will be found, there seems to be padding, but also very large

So also need to add overflow:visible;

The property contenteditable is set to false or the cursor jumps into the button.

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


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



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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24-25 function Getpositionfortextarea (ctrl) {//Get cursor position var caretpos = 0; if (document.selection) {ctrl.focus (); var Sel = Docume Nt.selection.createRange (); var Sel2 = Sel.duplicate (); Sel2.movetoelementtext (ctrl); var caretpos =-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) {var A=getpositionfortextarea ($ (' reply ' +i)); if (e.keycode==8&&a<3) {var Pat = new RegExp ("^<p><button .*?>.*?</button> </p>$", ' I '); if (Pat.test (this.innerhtml)) this.innerhtml= '; } };

The cursor position <3 indicates that the button tag is in front of the cursor, and the input box can be emptied. Note Here for rigor, using regular expressions to verify that the button label is not.

In addition, the P tag is wrapped outside the button label in the regular expression, because IE will automatically wrap the P label on the front line by default when the switch is pressed by the carriage return. Of course, at the beginning of the input box you also need to wrap the P tag outside the button label.


The QQ space uses the IMG tag on the FF

Previously thought QQ space in the modern browser unified use of the IMG tag, write when found in chrome with the button tag, so in the chrome to try to insert the IMG tag, found how also can not get rid of the border, and delete the time, The position of the cursor in the binding will also be inconsistent with IE, because modern browser line wrapping is inserted by default
, and then simply use button tags on chrome.

In my example, if you insert a button tag in FF, the input box does not get the focus easily. Ben also lazy to change, is still in the FF insert IMG tag, the corresponding KeyDown callback


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

Just judge the number of child nodes in the input box.

Final effect






Attached examples Download

The above mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.