Perfect Effect of replying to comments in imitation QQ space using JS

This article mainly introduces the perfect effect of replying to comments in imitation QQ space. It is very practical. I will attach the instance code to you. If you need it, refer to it. Comments and replies are common, but different methods are implemented on different websites. There are two methods in general:

1.

The most common way is Youku. In the input box, @ is the person to reply to. In this way, you can modify @.

On Sina Weibo, a friend menu is displayed. The advantage of this method is that css processing is compatible without any js.

2.

Such as QQ space, the entire reply person is deleted. Ben feels that this method is better, but this method has some compatibility details, which will be detailed later.

In fact, this implementation of QQ space is compatible with ie and modern browsers in terms of effect, and is doing very well. The above is chrome

Ie8

Ie7

Ie6 is no longer a piece. It is too difficult to understand. The final example will be attached at the end of this Article. Of course, it is also compatible with ie6.

The following describes how to implement it.

First, let's see how the QQ space is made.

Chrome

As you can see above, the QQ space adds text to the button, so that the user name to be replied can be deleted during deletion.

However, this is not enough. First, we need to set the button to inline-block,

Eliminate the default transparent background, border, and padding of the button. Set margin to 0.

button{ border: 0; background:none; }

Insert in ie6, 7 and you will find that the padding still exists and is large.

Therefore, you need to add overflow: visible;

In addition, the contenteditable attribute is set to false. Otherwise, the cursor will jump to the button,

Then, under ie8, you will find that if you press Enter when you enter the tag, and then you will find that the button tag cannot be deleted, and the cursor will run to the front of the button tag, in addition, if you press the right button again or click the right side of the button tag, the cursor cannot be directed to the right side of the button tag. In fact, QQ space also has this problem in ie8.

Ie8

In ie6 and 7, there is no such problem.

Ie7

Ie6

For ie8, You need to bind the keydown Event Callback check_comment to the text box, and there is no problem with binding to ie6 and 7. Here we will bind the ie uniformly.

Function getPositionForTextArea (ctrl) {// obtain the cursor position var CaretPos = 0; if (document. selection) {ctrl. focus (); var Sel = document. 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 (Ca RetPos);} vm. check_comment = function (e, I) {var a = getPositionForTextArea ($ ('reply' + I); if (e. keyCode = 8 & a <3) {var pat = new RegExp ("^. *? $ ", 'I'); if (pat. test (this. innerHTML) this. innerHTML = '';}};

The cursor position <3 indicates that the button label is in front of the cursor, and the input box can be cleared. Note: To be rigorous, use a regular expression to verify whether the button tag is used.

In addition, in the regular expression, the p tag is wrapped outside the button tag because ie automatically wraps the p tag in the previous row by default when you press enter to change the line. Of course, the p tag must be included outside the button tag in the input box at the beginning.

Digress

The img tag is used for the QQ space ff.

I used to think that the img tag is used in modern browsers in the QQ space. When I wrote it, I found that the button tag is used in chrome. So I tried inserting the img tag in chrome, I found that I couldn't get the border, and the cursor position in the binding will be different from that in ie when I delete it, because the modern browser inserts a line feed by default.
So Google uses the button tag for chrome.

In my example, if the button label is inserted in ff, the input box is not easy to get the focus. I am too lazy to modify it. I still Insert the img tag in ff, and the corresponding keydown callback

if(!!-[1,]&&e.keyCode==8&&$('reply'+i).childNodes.length==2){//ff          this.innerHTML='';          return;        }

You only need to determine the number of subnodes in the input box.

Final Effect

Chrome

Ff

Ie8

Ie7

Ie6

The above is all the content of this article. I hope you will like it.

Related Articles:

PHP comment reply Solution

How to Implement infinitely nested php comments? You have written the basic code and are looking forward to understanding it.

Use php wireless level to implement comment reply function in different categories