小甲鱼 发表于 2012-6-25 18:39:05

详解微博发言框的@功能

经常使用微博的人会发现,当我们在输入框输入@然后敲一个人的名字,会弹出一个tip提示层,如图所示:



出于对这个功能的好奇,并抱着学习的态度,翻阅了一些资料后对这个Javascript进行了探讨和研究。
对这个功能进行分析如下:

1、确定光标的位置

2、textarea文本框里对字符串@的判断

3、tip的弹出事件

4、键盘的操作事件

5、ajax调用

6、文字的插入

......

当然还有其他的功能。

看着是不是感觉很复杂?没关系,我们一步一步的分析。

首先我们要确定textarea的光标位置。在W3C中,获取光标位置比较简单,可以用selectionStart和selectionEnd,IE浏览器不支持这2个属性 ,但是IE又一个document.selection对象,可以模拟实现相同的功能。代码如下:

//先定义一个基本类,来设置一些全局变量
function demonAt(opts) {
    this.elem=opts.elem; //文本框
    this.at= {};    //临时保存文本框内容截取属性
    this.opt= {};
    this.searched=""; //用于判断用户输入字符是否和前面一样,如果一样跳过ajax
    this.url=opts.url;
    this.index=1;
}
//微博的@功能
demonAt.prototype= {
    getCursor: function(elem) {
      var _this=this;
      var rangeData = {
            start: 0,
            end: 0,
            text: ""
      };
      if(typeof(this.elem.selectionStart)=="number") {//W3C
rangeData.start=this.elem.selectionStart;//光标起始位置
            rangeData.end=this.elem.selectionEnd;//光标末尾位置
rangeData.text=this.elem.value.substring(0,this.elem.selectionStart);//获取文本框value
      } else if (document.selection) {//IE
            var sRange=document.selection.createRange();
            var oRange=document.body.createTextRange();
            oRange.moveToElementText(this.elem);
            rangeData.text=sRange.text;
            rangeData.bookmark = sRange.getBookmark();
for(i=0;oRange.compareEndPoints("StartToStart",sRange)< 0 && sRange.moveStart("character", -1) !== 0; i ++) {
                if (this.elem.value.charAt(i) == '\r') {
                  i ++;//IE的特殊处理,遇到enter键需要加1
                }
            }
            rangeData.start=i;
            rangeData.end = rangeData.text.length + rangeData.start;
            rangeData.text=this.elem.value.substring(0,i);
      }
      //alert(rangeData.text)
      return rangeData;
    },
    setCursor: function(elem,start,end) {//设置光标
      if(this.elem.setSelectionRange) {//W3C
            this.elem.setSelectionRange(start,end);
      } else if(this.elem.createRange) {//IE
            var range=this.elem.createRange();
            if(this.elem.value.length==rangeData.start) {
                range.collapse(false);
                range.select();
            } else {
                range.moveToBookmark(rangeData.bookmark);
                range.select();
            }
      }
    },
    add: function(elem,txtData,nStart, nLen) {//插入文本参数操作的元素,数据,起始坐标位置,用户输入字符长度
      //this.setCursor(this.elem,this.rangeData);
      this.elem.focus();
      var _range;
      if(this.elem.setSelectionRange) {//W3C
            _tValue=this.elem.value;//获取文本框内容
            var _start = nStart - nLen,//设置光标起点光标的位置-离@的文本长度
            _end = _start + txtData.length,//设置光标末尾,start+数据文字长度
            _value=_tValue.substring(0,_start)+txtData+" "+_tValue.substring(nStart, this.elem.value.length);
            this.elem.value=_value;
            this.setCursor(this.elem,_end+1,_end+1);
      } else if(this.elem.createTextRange) {
            _range=document.selection.createRange();
            _range.moveStart("character", -nLen);//移动光标
            _range.text = txtData+" ";
      }
    }
}

自定义一个rangeData对象,保存光标的位置和textarea框内从光标位置到开始处的字符串;返回出来。这个对象在下面其他函数中会用到。根据光标位置的确定,可以书写文字插入函数add();有了上面的函数,我们可以对textarea框内@的字符判断,然后实现tip层定位和弹出,如果判断这个,我们可以用正则:

var _reg=/@[^@\s]{1,20}$/g;

那么定位呢,若在textarea内判断是不现实的,因为我们无法获取正确的left和top值,所以这里需要模拟一个div层,将div插入到body 中,定位到与textarea相同的位置,然后获取到textarea内的文字,进行字符串的拆分,加上标签元素,这样可以获取到正确的位置。说的有点绕了,看下面代码能更直观的表达。

var _string="<span>"+"@前面的文字"+"</span>"+"<cite>@</cite>"+"<span>"+"@后面的文字"+"</span>";

看到这句,很多人应该理解做法,将这段append到上诉定位的div中,这样,我们可以通过<cite>标签获取到offset值了。于是我们写下面的代码:

demonAt.prototype= {
    init: function() {//首先我们要初始化
      var _body=$("body");
      var _div=$("<div id='tWarp'></div>"),
      _tip=$("<div id='tipAt'></div>");
      _body.append(_div);
      _body.append(_tip);
      var _left=$(this.elem).offset().left+"px",
      _top=$(this.elem).offset().top+"px",
      _width=$(this.elem).outerWidth()+"px",
      _height=$(this.elem).outerHeight()+"px",
      _lineHeight=$(this.elem).css("line-height"),
      _style="position:absolute;overflow:hidden;z-index:-9999;line-height:"+_lineHeight+";width:"+_width+";height:"+_height+";left:"+_left+";top:"+_top;
      _div.attr("style",_style);
      this.inset();
    },
    getAt: function() {
      var _rangeData=this.getCursor();
      var k=_value=_rangeData.text.replace(/\r/g,"");//去掉换行符
      var _reg=/@[^@\s]{1,20}$/g;//正则,获取value值后末尾含有@的并且在20字符内
      var _string="";
      if(_value.indexOf("@")>=
      0&&_value.match(_reg)) {
            var _postion=_rangeData.start;
            var _oValue=_value.match(_reg);//找到value中最后匹配的数据
            var vReg=new RegExp("^"+_oValue+".*$","m");//跟数据匹配的正则   暂时保留
            _value=_value.slice(0, _postion); //重写_value 字符串截取从0截取到光标位置
            if(/^@+$/.test(_oValue)&& !/\s/.test(_oValue)) {
                this.at['m'] = _oValue = _oValue.slice(1);//用户输入的字符如@颓废小魔,即"颓废小魔"
                this.at['l'] = _value.slice(0, -_oValue.length - 1); //@前面的文字
                this.at['r'] = k.slice(_postion - _oValue.length, k.length);//@后面的文字
                this.at['pos']=_postion;//光标位置
                this.at['len']=_oValue.length;//光标位置至@的长度,如 @颓废小魔,即"颓废小魔"的长度
                this.showTip(this.url)
            } else {//alert(1)
                this.hiddenTip()
            }
      } else {
            this.hiddenTip()
      }
    },
    buidTip: function() {//创建tip,设置tip的位置
      var _this=this;
      $("#tWarp").empty();
      var _string="<span>"+this.format(this.at['l'])+"</span>"+"<cite>@</cite>"+"<span>"+this.format(this.at['r'])+"</span>";
      $("#tWarp").html(_string);
      var _left=$("#tWarp cite").offset().left+"px",
      _top=$("#tWarp cite").offset().top+parseInt($("#tWarp").css("line-height"))+"px";
      if(parseInt(_top)>parseInt($("#tWarp").offset().top+$("#tWarp").height())) {
            _top=$("#tWarp").offset().top+$("#tWarp").height()+"px";
      }
      $("#tipAt").css({
            "left":_left,
            "top":_top,
            "display":"block"
      });
      $("#tipAt li").eq(1).addClass("on").siblings().removeClass("on");
      _this.hover();
      //取消keyup绑定,绑定keydown,键盘操作选择,避免与文本框的事件冲突
      $(_this.elem).unbind('keyup').bind('keydown', function(e) {
            return _this.keyMove(e);
      });
    },
    hiddenTip: function() {
      var _this=this;
      $("#tipAt").css("display","none");
      $("#tipAt li").unbind("click,mouseover");
    }
}

然后我们添加键盘的操作,这里注意的是,我们在textarea输入文字的时候已经绑定keyup事件,为了避免事件多次绑定,tip的选择我们用keydown事件处理。

demonAt.prototype= {
    keyMove: function(e) {//键盘操作
      var _this=this;
      var _key=e.keyCode;
      var _len=$("#tipAt li").length;
      switch(_key) {
            case 40:
                //下
                _this.index++;
                if(_this.index>_len-1) {
                _this.index=1;
                }
                _this.keyMoveTo(_this.index);
                //return false一定要加上,不然JS会继续进行调用keyHandler,从而绑定了keyup事件影响到键盘的keydown事件
                return false;
                break;
            case 38:
                //上
                _this.index--;
                if(_this.index<1) {
                _this.index=_len-1;
                }
                _this.keyMoveTo(_this.index);
                return false;
                break;
            case 13:
                //enter键
                var txtData=$(".on").text();
                _this.add(_this.elem,txtData,_this.at['pos'],_this.at['len'])
                _this.keyHandler()
                return false;
                break;
            default:
      };
      _this.keyHandler();
    },
    keyHandler: function() {
      var _this=this;
      _this.index=1;
      //enter键盘操作后重新绑定keyup
      $(_this.elem).unbind("keydown").bind("keyup", function() {
            _this.getAt();
      })
    },
    keyMoveTo: function(index) {
      $("#tipAt li").removeClass("on").eq(index).addClass("on");
    }
}

然后添加tip的点击事件和hover事件。

demonAt.prototype= {
    inset: function() {//给li绑定事件,
      var _this=this;
      $("#tipAt").delegate("li","click", function() {//事件委托
            if($(this).index()==0) {
                _this.elem.focus();
                return false;
            } else {
                var txtData=$(this).text();
                _this.add(_this.elem,txtData,_this.at['pos'],_this.at['len'])
                _this.hiddenTip()
            }
      })
    },
    hover: function() {
      //hover事件
      var _this=this;
      $("#tipAt li:not(:first)").hover( function() {
            _this.index=$(this).index();
            $(this).addClass("hover").siblings().removeClass("on hover")
      }, function() {
            $(this).removeClass("hover");
      })
    }
}


到这里,微博的@功能就已经全部讲解清楚了,希望各位可以清楚明白的了解。


转自我爱猫猫技术博客


微博评论 发表于 2012-6-25 18:48:03

用ajax吧 跟百度搜索的那个有点类似。(个人猜测)

http://www.fishc.com/x/xwb/images/bgimg/icon_logo.png 来自 阿__彭 的新浪微博

向往 发表于 2012-6-25 19:48:12

看到最后才发现。。。不是宇哥你写的{:5_107:}

小甲鱼 发表于 2012-6-25 19:55:43

向往 发表于 2012-6-25 19:48 static/image/common/back.gif
看到最后才发现。。。不是宇哥你写的

哟西,我也学习中而已~

Macro 发表于 2012-6-25 20:07:35

好复杂啊:L不懂不懂

向往 发表于 2012-6-27 23:20:58

哈哈不懂{:5_105:}

猫儿不想叫 发表于 2012-7-18 08:29:38

确实好复杂啊~!

菜得要自杀 发表于 2012-7-18 12:26:11

其实就是AJAX。。:lol

不再等待 发表于 2012-7-18 12:37:09

路过,打酱油!!

du0928 发表于 2012-11-28 19:31:47

强大啊lz                           

mmmrtyr 发表于 2012-12-30 07:27:46

谢谢分享!

citian3094 发表于 2015-5-2 12:41:27

学习了,谢谢!
页: [1]
查看完整版本: 详解微博发言框的@功能