本文主要介绍模仿QQ空间评论回复特效的完美实现，非常实用。附上给大家的示例代码，有需要的朋友可以参考一下。
回复是一件很常见的事情，但是各大网站的变现方式不一样。基本上有两种方式。
1.
最常见的，像优酷，@输入框回复的人。这样，用户可以修改@
新浪微博就是在这个基础上，弹出好友菜单。这种方法的优点是它不需要任何JS和CSS处理是兼容的。
2.
喜欢qq空间，把回复的人都删了。本雕觉得这种方法比较好，但是这种方法有一些兼容性细节，后面会详细说明。
其实qq空间的这个实现在效果上是兼容ie和现代浏览器的，很不错。是chrome。
ie8
ie7
Ie6不会上图，太卡了，大家都知道。最后将最后的例子附在这个旋塞上，当然是兼容ie6的。
下面来说说如何实现。
我们来看看qq空间是怎么做出来的。
chrome
从上面可以看到，qq空间在按钮上添加了文字，这样在删除的时候，可以将回复的用户名完全删除。
然而，这还不够。首先，样式需要设置为inline-block。
消除按钮的默认透明背景、边框和填充，并将margin设置为0。
复制代码如下：button { border:0；背景：无；}
这时候插入ie6，7，会发现padding还是存在的，而且还是很大。
所以还需要加上overflow:visible；
此外，属性contenteditable被设置为false，否则光标将跳转到按钮中。
然后在ie8下，你会发现如果你在输入的时候输入，然后在依次删除的过程中，你会发现按钮标签无法删除，光标会跑到按钮标签的前面，而再次按右光标键或者用鼠标点击按钮标签的右侧，都无法使光标跑到按钮标签的右侧。其实qq空间在ie8中也有这个问题
ie8
但是在ie6，7下，就不存在这个问题了。
ie7
ie6
这里，ie8需要将keydown事件绑定到文本框，并回调check_comment。ie6和IE7绑定的时候没有问题。这里，IE是一致绑定的。
GetPositionFortextArea(Ctrl){//获取光标位置
var caret pos=0；
if(document.selection) {
ctrl . focus()；
var Sel=doc . selection . create range()；
var sel 2=sel . duplicate()；
sel 2 . movetoelementtext(ctrl)；
var caret pos=-1；
while(Sel2.inRange(Sel)){
sel 2 . movestart( character )；
CaretPos
}
} else if(ctrl . selection start | | ctrl . selection start== 0 ){
caret pos=ctrl . selection start；
}
退货(caret pos)；
}
vm.check_comment=function(e，i){
var a=getPositionForTextArea($( reply I))；
if(e.keyCode==8a3){
新RegExp(^pbutton。*?*?/button。/p$ ， I )；
if(pat.test(this.innerHTML))
this . innerhtml=“”；
}
};
光标位置3表示按钮标签在光标前面，这时可以清除输入框。这里注意，为了严谨起见，用正则表达式来验证是否是按钮标签。
另外，在正则表达式中，P标签是在button标签之外换行的，因为ie在回车换行时，默认自动将P标签换行到上一行。当然，在开始的时候，你也要在输入框的按钮标签外面包裹P标签。
题外话
Qq空间在ff上使用img标签。
我一直以为现代浏览器上qq空间用的是img标签，但是写的时候发现chrome用的是button标签，于是尝试在chrome下插入img标签，发现无法去掉边框。而且我删除的时候，绑定中光标位置的判断会和ie不一致，因为现代浏览器断行的时候默认插入br，所以我干脆用了chrome的button标签。
另外，在我的例子中，如果在ff中插入了按钮标签，输入框就不容易获得焦点。本雕懒得改。他仍然在ff中插入img标签和相应的keydown回调。
如果(！-[1，]e . key code==8 $( reply I). child nodes . length==2){//ff
this . innerhtml=“”；
返回；
}
只需判断输入框中的子节点数量即可。
最终效果
铬
消防
ie8
ie7
ie6
示例下载附后。
以上是本文的全部内容。我希望你能喜欢它。
