出于对这个功能的好奇，并抱着学习的态度，翻阅了一些资料后对这个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测试数据pareEndPoints("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+" ";
}
}
}