用Javascript分析微博@功能

这篇文章主要介绍“用Javascript分析微博@功能”，在日常操作中，相信很多人在用Javascript分析微博@功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用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;               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=""+"@前面的文字"+""+"@"+""+"@后面的文字"+"";

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

demonAt.prototype= {       init: function() {//首先我们要初始化           var _body=$("body");           var _div=$("