关于qq空间评论回复的一点研究

转载请注明: TheViper http://www.cnblogs.com/TheViper  

评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同。大体上有两种方式

1.

像优酷这种最常见,在输入框中@要回复的人,这种方式下,用户可以修改@。

新浪微博则是在这个基础上,弹出好友菜单。这种方式的好处是不需要任何js,css处理兼容。

2.

像qq空间这种,对回复的人整个删除。本屌感觉这种方式比较好,但这种方式有些兼容性上的细节,这个后面会详细说明。

事实上,qq空间的这种实现在效果上是兼容了ie和现代浏览器的,做的非常好。上面是chrome

ie8

ie7

ie6就不上图片了,太卡了,都懂得,最后本屌会附上最终例子的,当然也兼容ie6。

下面就说说怎么实现的。

先看看qq空间是怎么做的

chrome

上面可以看到,qq空间是在button中加上文字,这样在删除的时候对被回复的用户名就能整个删除了。

不过这样做还不够,首先是样式,需要把button设置成inline-block,

消除button默认的透明背景,边框,当然还有padding,margin设为0

    button{
        border: 0;
        background:none;
    }

这时在ie6,7中插入会发现,似乎还存在padding,而且还很大

所以还需要加上 overflow: visible;

另外属性contenteditable设置成为false,否则光标会跳到button里面,

然后在ie8下会发现,输入的时候如果有回车,然后在依次删除的过程中,会发现button标签删不掉,光标会跑到button标签前面,而且再次按右光标键或用鼠标点击button标签右边都无法让光标跑到button标签右边。事实上,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>&nbsp;</p>$",‘i‘);
                    if(pat.test(this.innerHTML))
                        this.innerHTML=‘‘;
                }
            };

光标位置<3表明光标前面就是button标签了,这时就可以清空输入框了。注意这里为了严谨,用正则表达式验证是不是button标签.

另外在正则表达式中button标签外包裹p标签,是因为ie在按回车换行时,会默认自动对前面的行包裹p标签。当然,一开始在输入框也要在button标签外包裹p标签。

题外话

qq空间在ff上用的是img标签

之前一直以为qq空间在现代浏览器上统一用的是img标签,写的时候才发现在chrome中用的是button标签,于是就在chrome下试了一下插入img标签,发现怎么也弄不掉边框,索性对chrome也用button标签。

另外在我的例子中,ff中插入button标签的话,输入框不容易获得焦点。本屌也懒得去改了,仍然是在ff中插入img标签,对应的keydown回调

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

只用判断输入框的子节点个数就可以了。

最终效果

chrome

ff

ie8

ie7

ie6

附上例子下载

如果您觉得本文的内容对您有所帮助,您可以打赏我:

时间: 2024-10-21 23:53:33

关于qq空间评论回复的一点研究的相关文章

仿微信朋友圈/qq空间评论 下载刷新下拉加载回复、评论等

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">    D</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);"&g

乐易贵宾VIP教程:百度贴吧 - QQ部落 - QQ空间 Post实战系列视频课程

教程挺不错,3套案例的实战,有需要的可以看一下百度贴吧课程目录:1.百度登录抓包分析2.百度登录[代码实现]3.百度验证码登录[代码实现]4.贴吧关注[抓包分析]5.贴吧关注(代码编写)6.贴吧签到[抓包分析]7.贴吧签到[代码编写]8.贴吧发帖[抓包分析]9.贴吧发帖[代码编写]10.贴吧回帖[抓包分析]11.贴吧回帖[代码编写]12.贴吧私信13.上传头像[代码编写]13.上传头像[抓包分析]14.获取贴吧成员15.大召唤技术16.楼中楼回复17.百度RSA密码加密详解分析18.取百度好友(

Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件

原文:Android项目实战(十六):QQ空间实现(一)-- 展示说说中的评论内容并有相应点击事件 大家都玩QQ空间客户端,对于每一个说说,我们都可以评论,那么,对于某一条评论: 白雪公主 回复 小矮人 : 你们好啊~ 我们来分析一下: 1.QQ空间允许我们 点击 回复人和被回复人的名字就可以进入对于用户的个人主页(即点击文字“白雪公主”/“小矮人”,就可以进入到这俩用户相应个人主页) 2.点击 回复的文字,就可以对回复人进行回复(即点击评论中回复的内容“你们好啊~”,便对弹出一个编辑框对回复人

QQ空间自动评论自动转发 微博自动自动转发神器带源码(超简单) 升级版

//QQ空间自动评论自动转发 Dim iy Rem head iy = 0 Rem nextfind FindPic 0,iy,1366,768,"Attachment:\qqzf.bmp",0.9,intX,intY If intX > 0 And intY > 0 Then //MessageBox "aa" MoveTo intX , intY Delay 500 LeftClick 1 MoveTo 0,0 Delay 2000 SayStrin

QQ空间自动评论自动点赞 微博自动点赞自动转发神器带源码(超简单)

原理:先找到对应的图,得到坐标点击.或转发,向下翻页.自动巡屏.关于怎么判断是否已经赞或已经转发,是通过图片不一样,或者把屏从上到下分多个块实现的. // QQ空间自动点赞机 小黄人为您点赞. //12行代码实现.源码:Rem head FindPic 0,0,1024,768,"Attachment:\zan.bmp",1,intX,intY If intX > 0 And intY > 0 Then MoveTo intX+5, intY+5 Delay 100 Lef

横瓜先生深度剖析QQ空间前端后端技术AJAX与FORM等等

[皇帝]北京-横瓜-7年(601069289)  22:06:34 [元帅]横瓜-PHP教父(601069289)  21:35:29 这里是QQ空间的图片上传方法 是FLASH 我草 [元帅]横瓜-PHP教父(601069289)  21:36:31 竟然不是JS QQ空间用FLASH 图片上传方法 [元帅]横瓜-PHP教父(601069289)  21:37:35 至此,整个QQ空间的技术,已经全部被我破解 @IT柏拉图 [元帅]IT柏拉图(2500875)  21:38:11 你真是天才,

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

QQ空间/朋友圈类界面的搭建

类似于QQ空间的布局主要是在说说信息.点赞.回复三大部分的自适应布局上. 当我们需要搭建类似QQ空间.微信朋友圈的界面的时候,可做如下操作: 创建一个对应的model类: 创建一个对应model类的frameModel类,并将对应的model封装进这个frameModel类.frameModel类是将model对应显示的data的控件frame转换为一个可持久化的frame,这样一来,就可以在第3布容易很多: 创建一个talbleviewcell,根据 model可能显示的对象,初始化cell,

2014最牛逼的项目《QQ空间赚钱术》财富暴增100倍的秘密

本人潜心研究Q空间数10年,十年磨一剑,终于顿悟了QQ赚钱的全套盈利体系. 2014年,小试牛刀,通过QQ空间,短短三个月,赚了300万.300万不多不少,在 一线城市,仅仅能买套普普通通的房子而已.算不上多体面的事儿,说多了,就 有人眼红. 一年能赚到2个亿,才算是人生的刚刚开始.我注定是做大事的人,每当我吹牛有 人反驳时,我哈哈大笑:燕雀焉知鸿鹄之志,王侯将相,宁有种乎? 什么是傻逼?就是遇到超出自己思想范畴的事儿,就拼命反驳人家.有人反驳我 时,我哈哈大笑.懒得搭理他们.适合做傻逼的,就心