跳转到内容


微博@功能的详解

微博 AT

  • 您无法回复此主题
No replies to this topic

#1 冰力

    Administrator

  • 总版主
  • 1316 帖子数:

发表于 2012/06/06 22:14:09

对这个功能进行分析如下:确定光标的位置、textarea文本框里对字符串@的判断、tip的弹出事件、键盘的操作事件、ajax调用、文字的插入等。


经常使用微博的人会发现,当我们在输入框输入@然后敲一个人的名字,会弹出一个tip提示层,如图所示:
附加文件  AT.png   20.82K   0 下载次数

出于对这个功能的好奇,并抱着学习的态度,翻阅了一些资料后对这个Javascript进行了探讨和研究。
对这个功能进行分析如下:
  • 确定光标的位置
  • textarea文本框里对字符串@的判断
  • tip的弹出事件
  • 键盘的操作事件
  • ajax调用
  • 文字的插入

当然还有其他的功能。
看着是不是感觉很复杂?没关系,我们一步一步的分析。
首先我们要确定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;   
			rangeDatarangeData.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)[0];//找到value中最后匹配的数据   
			var vReg=new RegExp("^"+_oValue+".*$","m");//跟数据匹配的正则   暂时保留   
			_value_value=_value.slice(0, _postion); //重写_value 字符串截取  从0截取到光标位置   
			if(/^@[a-zA-Z0-9\u4e00-\u9fa5_]+$/.test(_oValue)&& !/\s/.test(_oValue)) {   
				this.at['m'] = _oValue_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");   
		})   
	}   
}
到这里,微博的@功能就已经全部讲解清楚了,希望各位可以清楚明白的了解。