完美实现仿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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
自己的js工具_Form 封装
Aug 21 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
vue监听键盘事件的相关总结
Jan 29 Vue.js
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 取得瑞年与平年的天数的代码
2009/08/10 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python 含参构造函数实例详解
2017/05/25 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python输出决策树图形的例子
2019/08/09 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
python中的对数log函数表示及用法
2020/12/09 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
运动会领导邀请函
2014/02/05 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
总经理检讨书范文
2015/02/16 职场文书
复兴之路观后感
2015/06/02 职场文书
实验心得体会范文
2016/01/25 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL