A Research on replying to comments in the QQ space

A Research on replying to comments in the QQ space

Reprinted Please note:TheViper http://www.cnblogs.com/TheViper

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 ("^ <p> <button. *?>. *? </Button> & nbsp; </p> $ ", '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 chrome also used the button tag.

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

Attached example download

 

If you think the content of this article is helpful to you, You can reward me: