QQスペースのコメントについて少し調べてみました Reply_html/css_WEB-ITnose

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

1.

最も一般的な方法は、Youku のように、入力ボックスに返信したい相手の @ を変更する方法です。

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

2.

QQスペース同様、リプライ頂いた方は全て削除させて頂きます。この方法の方が良いと思いますが、この方法には互換性の詳細があり、後で詳しく説明します。

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

ie8

ie7

ie6です。 最後に、最終的な例も添付します。 ie6で。

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

まず qq スペースがどのように機能するかを見てみましょう

chrome

上でわかるように、qq スペースはボタンにテキストを追加するため、削除するときに、返信されたユーザー名を完全に削除できます。

しかし、これでは十分ではありません。最初のスタイルは、ボタンをインラインブロックに設定する必要があります。

ボタンのデフォルトの透明な背景と境界線を削除し、もちろんパディングとマージンを 0 に設定します。

    button{        border: 0;        background:none;    }

この時点で ie6 で 7 に挿入すると、パディングがあるように見えますが、まだ非常に大きいです

したがって、IE8 では、overflow:visible; を追加する必要があります。入力時にキャリッジ リターンがあり、削除プロセス中にボタン ラベルを削除できないことがわかります。カーソルがボタン ラベルの前に移動し、もう一度右カーソル キーを押すか、マウスでボタンをクリックしても、ラベルの右側にカーソルは移動できません。実際、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("^<p><button .*?>.*?</button> </p>$",'i');                    if(pat.test(this.innerHTML))                        this.innerHTML='';                }            };

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

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

余談

qq space は ff

で img タグを使用します

最近のブラウザでは qq space が一律に img タグを使用していると思って書いていましたが、chrome でも使用されていることが分かりました。一つはbuttonタグなので、Chromeの下にimgタグを入れてみたところ、境界線が削除できないことが分かりました。また、最近のブラウザは挿入するため、削除する際にバインディング内のカーソル位置の判定がIEと一致しません。 0c6dc11e160d3b678d68754cc175188a はデフォルトで改行されるため、単純に chrome の button タグを使用しました。

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

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

に img タグを挿入するだけで済みます。

最終効果

クローム

ff

ie8

ie7

ie6

添付サンプルのダウンロード

この記事の内容が当てはまらないと思われた方はそれが役立つなら、あなたにとって便利です、あなたは私を傾けることができます：