Use JS to perfectly implement QQ space comment reply effects

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

1.

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

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 for 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 doesn’t upload pictures, it’s too laggy, everyone knows. I will attach the final example in the end, and of course it is also compatible with IE6.

Let’s talk about how to achieve it.

Let’s take a look at how qq space is done first

chrome

As you can see above, qq space It is to add text to the button, so that when deleting, the entire user name that was replied to can be deleted.

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, 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, the attribute contenteditable is set 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, for ie8, you need to bind the keydown event callback check_comment to the text box. It is no problem if you bind it for ie6 and 7. Here, it is bound to ie uniformly.

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("^.*? $",&#39;i&#39;);
          if(pat.test(this.innerHTML))
            this.innerHTML=&#39;&#39;;
        }
      };

The cursor position <3 indicates that the button label is in front of the cursor, and the input box can be cleared. Note that for the sake of rigor, a regular expression is used to verify whether it is a button label.

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

I always thought that QQ space uses the img tag in modern browsers. When I was writing, I discovered that the button tag was used in chrome. So I tried inserting the img tag in chrome and found that it didn't work. The border cannot be removed, and when deleting, the judgment of the cursor position in the binding will be inconsistent with IE, because modern browsers insert
by default for line breaks, so I 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. That's it.

Final effect

chrome

ff

ie8

ie7

ie6

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

Related articles:

Solution to PHP comment reply

About how to implement Infinitus nesting in PHP comment reply? The basic code has been written, and I look forward to experts answering my questions

Using PHP wireless levels to classify categories to implement the comment reply function