本文主要介绍模仿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
示例下载附后。
以上是本文的全部内容。我希望你能喜欢它。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。