完美实现仿QQ空间评论回复特效


Posted in Javascript onMay 06, 2015

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

1.

完美实现仿QQ空间评论回复特效

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

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

完美实现仿QQ空间评论回复特效

2.

完美实现仿QQ空间评论回复特效

像qq空间这种,对回复的人整个删除。本?鸥芯跽庵址绞奖冉虾茫??庵址绞接行┘嫒菪陨系南附冢?飧龊竺婊嵯晗杆得鳌?/p>

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

ie8

完美实现仿QQ空间评论回复特效

ie7

完美实现仿QQ空间评论回复特效

ie6就不上图片了,太卡了,都懂得,最后本?呕岣缴献钪绽?拥模?比灰布嫒?e6。

下面就说说怎么实现的。

先看看qq空间是怎么做的

chrome

完美实现仿QQ空间评论回复特效

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

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

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

button{ border: 0; background:none; }

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

完美实现仿QQ空间评论回复特效

完美实现仿QQ空间评论回复特效

所以还需要加上overflow: visible;

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

然后在ie8下会发现,输入的时候如果有回车,然后在依次删除的过程中,会发现button标签删不掉,光标会跑到button标签前面,而且再次按右光标键或用鼠标点击button标签右边都无法让光标跑到button标签右边。事实上,qq空间在ie8中也有这个问题

ie8

完美实现仿QQ空间评论回复特效

而在ie6,7下,就没有这个问题

ie7

完美实现仿QQ空间评论回复特效

ie6

完美实现仿QQ空间评论回复特效

这里针对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表明光标前面就是button标签了,这时就可以清空输入框了。注意这里为了严谨,用正则表达式验证是不是button标签.

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

完美实现仿QQ空间评论回复特效

题外话

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

完美实现仿QQ空间评论回复特效

之前一直以为qq空间在现代浏览器上统一用的是img标签,写的时候才发现在chrome中用的是button标签,于是就在chrome下试了一下插入img标签,发现怎么也弄不掉边框,而且删除的时候,绑定中光标位置的判断也会和ie不一致,因为现代浏览器换行默认插入<br>,于是索性对chrome也用button标签。

另外在我的例子中,ff中插入button标签的话,输入框不容易获得焦点。本?乓怖恋萌ジ牧?仍然是在ff中插入img标签,对应的keydown回调

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

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

最终效果

chrome

完美实现仿QQ空间评论回复特效

ff

完美实现仿QQ空间评论回复特效

ie8

完美实现仿QQ空间评论回复特效

ie7

完美实现仿QQ空间评论回复特效

ie6

完美实现仿QQ空间评论回复特效

附上例子下载

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
jquery 使用简明教程
Mar 05 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
angular+webpack2实战例子
May 23 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
node.js实现上传文件功能
Jul 15 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
JS实现CheckBox复选框全选全不选功能
May 06 #Javascript
javascript使用avalon绑定实现checkbox全选
May 06 #Javascript
js实现滑动触屏事件监听的方法
May 05 #Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
You might like
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python elasticsearch环境搭建详解
2019/09/02 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python模拟实现分发扑克牌
2020/04/22 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
上海期货面试题
2014/01/31 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
清洁工表扬信
2014/01/08 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
书香校园活动方案
2014/02/28 职场文书
慈善晚会策划方案
2014/05/14 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
检讨书模板大全
2015/05/07 职场文书
详解MySQL集群搭建
2021/05/26 MySQL