微博的@功能

出于对这个功能的好奇，并抱着学习的态度，翻阅了一些资料后对这个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="<span>"+"@前面的文字"+"</span>"+"<cite>@</cite>"+"<span>"+"@后面的文字"+"</span>";

 

 

 

　　看到这句，很多人应该理解做法，将这段append到上诉定位的div中，这样，我们可以通过<cite>标签获取到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");//跟数据匹配的正则 暂时保留

 

　　_valuevalue=_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=""+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<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");

 

　　})

 

　　}

 

　　}