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

カーソル位置 <3 は、ボタンのラベルがカーソルの前にあり、入力ボックスをクリアできることを示します。厳密さを期すために、ボタン ラベルであるかどうかを確認するために正規表現が使用されることに注意してください。

さらに、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 ワイヤレス レベルを使用してカテゴリを分類し、コメント返信機能を実装します