A little research on QQ space comment reply_html/css_WEB-ITnose

Replying comments is a very common thing, but the way each major website implements it is different. There are generally two ways

1.

The most common one is like Youku, @ the person you want to reply to in the input box. In this way, the user can Revise@.

Based on this, Sina Weibo pops up the friend menu. The advantage of this method is that it does not require any js or css processing compatibility.

2.

Like QQ space, all the people who reply will be deleted. I feel that this method is better, but this method has some compatibility details, which will be explained in detail later.

In fact, the implementation of QQ space is compatible with IE and modern browsers, and it is very good. The above is chrome

ie8

ie7

ie6 won’t upload pictures. It’s too stuck. I understand. Finally This article will attach the final example, which is of course also compatible with ie6.

Let’s talk about how to achieve it.

Let’s first look at how qq space does it

chrome

As you can see above, qq space adds text to the button, like this When deleting, the user name that was replied to can be deleted entirely.

But this is not enough. The first is the style. You need to set the button to inline-block.

Eliminate the default transparent background and border of the button. Of course, set padding and margin to 0

    button{        border: 0;        background:none;    }

At this time, when inserting in ie6 and 7, you will find that there seems to be padding, and it is still very large

So you need to add overflow: visible;

In addition, set the attribute contenteditable to false, otherwise the cursor will jump to the button,

Then you will find under IE8, if there is Press Enter, and then during the deletion process, you will find that the button label cannot be deleted, the cursor will move in front of the button label, and pressing the right cursor key again or clicking the right side of the button label with the mouse will not cause the cursor to move to the right side of the button label. In fact, qq space also has this problem in ie8

ie8

But under ie6 and 7, there is no such problem

ie7

ie6

Here you need to bind the keydown event callback check_comment to the text box for ie8. There is no problem if you bind it for ie6 and 7. Here it is Unified binding to ie.

        function getPositionForTextArea(ctrl) { //获取光标位置            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 (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

In addition, the p label is wrapped around the button label in the regular expression because when IE presses Enter to change the line, it will automatically change the previous one by default. The line wraps the p tag. Of course, at the beginning, the p tag must be wrapped outside the button tag in the input box.

Digression

qq space uses the img tag on ff

Before I thought that QQ Space uses the img tag uniformly on modern browsers. When I was writing, I discovered that the button tag was used in chrome. So I tried inserting the img tag under chrome and found that the border could not be removed, and When deleting, the judgment of the cursor position in the binding will be inconsistent with IE, because modern browsers insert 0c6dc11e160d3b678d68754cc175188a by default for line breaks, so simply use the button tag for Chrome.

In addition, in my example, if the button label is inserted into ff, the input box will not easily gain focus. I am too lazy to change it. I still insert the img tag in ff. The corresponding keydown callback

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

only needs to determine the number of child nodes of 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: