JS を使用して QQ スペースのコメント返信エフェクトを完全に実装する

コメントに返信することは非常に一般的なことですが、各主要 Web サイトの実装方法は異なります。一般的に、2 つの方法があります

1.

最も一般的な方法は Youku のようなもので、@ 入力ボックスに返信したい人を入力しますこのようにして、ユーザーは @ を変更できます。

これに基づいて、新浪微博は友達メニューをポップアップ表示します。この方法の利点は、互換性のための js または css 処理が必要ないことです。

2.

QQスペース同様、返信した人は全員削除されます。この方法の方が良いと思いますが、この方法には互換性の詳細があり、後で詳しく説明します。

実際、QQ スペースの実装は IE および最新のブラウザーと互換性があり、非常に優れています。上記はchrome

ie8

ie7

Ie6 は画像をアップロードできません。遅すぎることは誰もが知っています。最後に最後の例を添付します。もちろん、IE6 とも互換性があります。

それを達成する方法について話しましょう。

最初に QQ スペースがどのように行われるかを見てみましょう

chrome

上でわかるように、qqスペース ボタンに文字を追加し、削除する際に返信したユーザー名全体を削除できるようにするためです。

しかし、最初はボタンをインラインブロックに設定する必要があります。

もちろん、ボタンの透明な背景を削除します。パディングとマージンを 0 にします

button{ border: 0; background:none; }

このとき、IE6,7 で挿入すると、パディングがあるようで、まだ非常に大きいことがわかります

したがって、overflow:visible;

さらに、属性 contenteditable が false に設定されている必要があります。そうしないと、カーソルがボタンにジャンプします。

次に、ie8 の下に Enter キーを押すと、削除プロセス中にボタンのラベルが削除できないことがわかり、カーソルがボタンのラベルの前に移動し、Enter キーを押します。もう一度右カーソルキーを押しても、ボタンラベルの右側をマウスでクリックしても、カーソルはボタンラベルの右側に移動しません。実際、qq 空間でも ie8

ie8

でもこの問題が発生しますが、ie6 と 7 ではそのような問題は発生しません

ie7

ie6

ここで、ie8の場合はkeydownイベントのコールバックcheck_commentをテキストボックスにバインドする必要がありますが、ie6や7でも問題ありません。ここでは一律に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("^.*? $",&#39;i&#39;);
          if(pat.test(this.innerHTML))
            this.innerHTML=&#39;&#39;;
        }
      };

カーソル位置

さらに、IE が Enter キーを押すと、正規表現内で p ラベルがボタン ラベルの周囲にラップされます。行を変更すると、デフォルトでその行は p タグを囲みます。もちろん、最初は入力ボックスの button タグの外側で p タグをラップする必要があります。

余談

qq スペースは ff で img タグを使用します

最近のブラウザでは QQ スペースは img タグを使用していると思っていましたが、chrome では button タグが使用されていることに気づき、Chrome で img タグを挿入してみたところ、機能しませんでした。境界線は削除できず、削除する場合、バインディング内のカーソル位置の判断が IE と矛盾します。最近のブラウザでは改行にデフォルトで
が挿入されるため、単純に Chrome の button タグを使用します。

さらに、私の例では、ボタンのラベルが ff に挿入されている場合、入力ボックスは簡単にフォーカスを取得できません。私はそれを変更するのが面倒なので、引き続き ff に img タグを挿入します。対応する keydown コールバック

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

は、その子ノードの数を決定するだけです。入力ボックスです。

最終効果

クローム

ff

ie8

ie7

ie6

以上がこの記事の全内容です、皆さんも気に入っていただければ幸いです。

関連記事:

PHP コメント返信の解決策

PHP コメント返信で Infinitus ネストを実装する方法について?基本的なコードは書かれています。専門家が私の質問に答えてくれるのを楽しみにしています

PHP ワイヤレス レベルを使用してカテゴリを分類し、コメント返信機能を実装します