評(píng)論回復(fù)是個(gè)很常見的東西，但是各大網(wǎng)站實(shí)現(xiàn)的方式卻不盡相同。大體上有兩種方式

1.

像優(yōu)酷這種最常見，在輸入框中@要回復(fù)的人，這種方式下，用www.cppcns.com戶可以修改@。

新浪微博則是在這個(gè)基礎(chǔ)上，彈出好友菜單。這種方式的好處是不需要任何js,css處理兼容。

2.

像qq空間這種，對(duì)回復(fù)的人整個(gè)刪除。本屌感覺這種方式比較好，但這種方式有些兼容性上的細(xì)節(jié)，這個(gè)后面會(huì)詳細(xì)說明。

事實(shí)上，qq空間的這種實(shí)現(xiàn)在效果上是兼容了ie和現(xiàn)代瀏覽器的，做的非常好。上面是chrome

ie8

ie7

ie6就不上圖片了，太卡了，都懂得，最后本屌會(huì)附上最終例子的，當(dāng)然也兼容http://www.cppcns.comie6。

下面就說說怎么實(shí)現(xiàn)的。

先看看qq空間是怎么做的

chrome

上面可以看到，qq空間是在button中加上文字，這樣在刪除的時(shí)候?qū)Ρ换貜?fù)的用戶名就能整個(gè)刪除了。

不過這樣做還不夠，首先是樣式，需要把button設(shè)置成inline-block，

消除button默認(rèn)的透明背景，邊框，當(dāng)然還有padding,margin設(shè)為0

復(fù)制代碼 代碼如下:

button{ border: 0; background:none; }

這時(shí)在ie6,7中插入會(huì)發(fā)現(xiàn)，似乎還存在padding,而且還很大

所以還需要加上overflow: visible;

另外屬性contenteditable設(shè)置成為false,否則光標(biāo)會(huì)跳到button里面，

然后在ie8下會(huì)發(fā)現(xiàn)，輸入的時(shí)候如果有回車，然后在依次刪除的過程中，會(huì)發(fā)現(xiàn)button標(biāo)簽刪不掉，光標(biāo)會(huì)跑到button標(biāo)簽前面，而且再次按右光標(biāo)鍵或用鼠標(biāo)點(diǎn)擊button標(biāo)簽右邊都無法讓光標(biāo)跑到button標(biāo)簽右邊。事實(shí)上，qq空間在ie8中也有這個(gè)問題

ie8

而在ie6,7下，就沒有這個(gè)問題

ie7

ie6

這里針對(duì)ie8需要對(duì)文本框綁定dBryckeydown事件回調(diào)check_comment,對(duì)ie6,7綁定了也沒有問題，這里就統(tǒng)一的對(duì)ie綁定。

function getPositionForTextArea(ctrl) { //獲取光標(biāo)位置

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("^

.*??

$",'i');

if(pat.test(this.innerHTML))

this.innerHTML='';

}

};

光標(biāo)位置<3表明光標(biāo)前面就是button標(biāo)簽了，這時(shí)就可以清www.cppcns.com空輸入框了。注意這里為了嚴(yán)謹(jǐn)，用正則表達(dá)式驗(yàn)證是不是button標(biāo)簽.

另外在正則表達(dá)式中button標(biāo)簽外包裹p標(biāo)簽，是因?yàn)閕e在按回車換行時(shí)，會(huì)默認(rèn)自動(dòng)對(duì)前面的行包裹p標(biāo)簽。當(dāng)然，一開始在輸入框也要在button標(biāo)簽外包裹p標(biāo)簽。

題外話

qq空間在ff上用的是img標(biāo)簽

之前一直以為qq空間在現(xiàn)代瀏覽器上統(tǒng)一用的是img標(biāo)簽，寫的時(shí)候才發(fā)現(xiàn)在chrome中用的是button標(biāo)簽，于是就在chrome下試了一下插入img標(biāo)簽，發(fā)現(xiàn)怎么也弄不掉邊框，而且刪除的時(shí)候，綁定中光標(biāo)位置的判斷也會(huì)和ie不一致，因?yàn)楝F(xiàn)代瀏覽器換行默認(rèn)插入
,于是索性對(duì)chrome也用button標(biāo)簽。

另外在我的例子中，ff中插入button標(biāo)簽的話，輸入框不容易獲得焦點(diǎn)。本屌也懶得去改了,仍然是在ff中插入img標(biāo)簽，對(duì)應(yīng)的keydown回調(diào)

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

this.innerHTML='';

retur

只用判斷輸入框的子節(jié)點(diǎn)個(gè)數(shù)就可以了。

最終效果

chrome

ff

ie8

ie7

ie6

附上例子下載

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

本文標(biāo)題: 完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效

本文地址: http://www.cppcns.com/ruanjian/java/124171.html

總結(jié)

以上是生活随笔為你收集整理的java仿qq空间音乐播放_完美实现仿QQ空间评论回复特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。