经常使用微博的人会发现，当我们在输入框输入@然后敲一个人的名字，会弹出一个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) 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=+@前面的文字++@++@后面的文字+;
复制代码
看到这句，很多人应该理解做法，将这段append到上诉定位的div中，这样，我们可以通过标签获取到offset值了。于是我们写下面的代码:
demonat.prototype= {
init: function() {//首先我们要初始化
var _body=$(body);
var _div=$(
),
_tip=$(
);
_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.slice(0, _postion); //重写_value 字符串截取 从0截取到光标位置
if(/^@[a-za-z0-9\u4e00-\u9fa5_]+$/.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=+this.format(this.at['l'])++@++this.format(this.at['r'])+;
$(#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 _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);
})
}
}
复制代码
到这里，微博的@功能就已经全部讲解清楚了，希望各位可以清楚明白的了解。
转自我爱猫猫技术博客