使用JS完美實現仿QQ空間評論回覆特效

評論回覆是個很常見的東西，但是各大網站實現的方式卻不盡相同。大體上有兩種方式

1.

像優酷這種最常見，在輸入框中@要回覆的人，這種方式下，用戶可以修改@。

新浪微博則是在這個基礎上，彈出好友選單。這種方式的好處是不需要任何js,css處理相容。

2.

像qq空間這種，對回覆的人整個刪除。本屌感覺這種方式比較好，但這種方式有些相容性上的細節，這個後面會詳細說明。

事實上，qq空間的這種實作在效果上是相容了ie和現代瀏覽器的，做的非常好。上面是chrome

ie8

ie7

ie6就不上圖片了，太卡了，都懂得，最後本屌會附上最終例子的，當然也兼容ie6。

下面就說說怎麼實現的。

先看看qq空間是怎麼做的

chrome

上面可以看到，qqq空間是在button中加上文字，這樣在刪除的時候對被回覆的用戶名就能整個刪除了。

不過這樣做還不夠，首先是樣式，需要把button設定成inline-block，

消除button預設的透明背景，邊框，當然還有padding,margin設為0

button{ border: 0; background:none; }

這時在ie6,7插入會發現，似乎還存在padding,而且還很大

所以還需要加上overflow: visible;

另外屬性contenteditable設定變成false,否則遊標會跳到button裡面，

然後在ie8下會發現，輸入的時候如果有回車，然後在依序刪除的過程中，會發現button標籤刪不掉，遊標會跑到button標籤前面，而且再次按右遊標鍵或用滑鼠點擊button標籤右邊都無法讓遊標跑到button標籤右邊。事實上，qq空間在ie8中也有這個問題

ie8

而在ie6,7下，就沒有這個問題

ie7

ie6

ie6

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;;
        }
      };

<這裡針對ie8需要對文字方塊綁定keydown事件回呼check_comment,對ie6,7綁定了也沒有問題，這裡就統一的對ie綁定。

遊標位置<3顯示遊標前面就是button標籤了，這時就可以清空輸入框了。注意這裡為了嚴謹，用正規表示式驗證是不是button標籤.

另外在正規表示式中button標籤外包裹p標籤，是因為ie在按回車換行時，會默認自動對前面的行包裹p標籤。當然，一開始在輸入框也要在button標籤外包裹p標籤。

題外話

qq空間在ff上用的是img標籤

之前一直以為qq空間在現代瀏覽器上統一用的是img標籤，寫的時候才發現在chrome中用的是button標籤，於是就在chrome下試了一下插入img標籤，發現怎麼也弄不掉邊框，而且刪除的時候，綁定中遊標位置的判斷也會和ie不一致，因為現代瀏覽器換行默認插入

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

,於是索性對chrome也用button標籤。

另外在我的例子中，ff插入button標籤的話，輸入框不容易獲得焦點。本屌也懶得去改了,仍然是在ff中插入img標籤，對應的keydown回調

只用判斷輸入框的子節點個數就可以了。

最終效果

chrome

ff

ie8

ie8

ie7

ie6

就是上述的全部所述了，希望大家能夠喜歡。 相關文章：PHP評論回覆解決方法關於php評論回覆無限極嵌套如何實現？已寫基本程式碼，期待高手解惑使用php無線等級分門別類 實作註解回覆功能