小技巧演化小创新

不知在什么时候，sina微博优化了"@某人"功能,就是在微博输入框里面输入“@”，就会在输入光标后面的“@”字符的位置，出现可供选择去“@”的好友列表框，

点击选择列表中的某一好友，就完成了对这个好友的“@”；功能如图所示：

图1,输入@出现好友列表：

 

 

图2,完成@：

 

 

写文章目的：

1,分析sina微博的这个小功能的实现。

2，练习使用qwrap框架。（http://qwrap.com/，360web前端团队js框架）

技术点分析：

实现这个功能，首先要获取光标在输入框中位置，然后判断光标后面是否有“@”字符。与光标有关的东东，我第一反应就是javascript里面的range。

没错就是靠range这个小技巧来完成了这一个小创新。如果不太了解range，请看这个文章，http://www.cnblogs.com/zhujl/archive/2011/11/02/2231255.html，写得很详细。

获取光标位置主要代码：

 

　　//textareaDom输入框dom元素

 　　start = textareaDom.selectionStart,//非ie获取光标点位置的方法

　　//ie获取光标点位置的方法

　　if(document.selection){

　　　　selectionObj = document.selection;
　　　　var rng = selectionObj.createRange();//名称为rng的range为当前光标所在的位置
　　　　textareaDom.select();//光标放到了第一个字符
　　　　rng.setEndPoint("StartToStart", selectionObj.createRange());//新创建的range在第一个字符之前，设置rng的开始端点为第一个字符前
　　　　var psn = rng.text.length;//获取当前range范围内的字符长度，即为光标所在的位置
　　　　rng.collapse(false);//range向后面的端点合并形成光标
　　　　rng.select();
}

 

 

 

现在获取了光标位置，而且光标后面有“@”字符，那怎么去算出“@”字符相对于textarea（微博输入框节点）的位置{top:多少px,left:多少px}？js里面还没有这样的方法函数。

怎么办？其实古代的人们也碰到过这样的问题，如何测量一个不规则容器的体积？一个叫亚里士多德的圣人给出一个好的解决方案，只要测量一个容器能装多少水，

通过这些水来推断出容器的体积。这是通过参照物解决问题的思维。

同样，我们这里也采用同样的思维方式。我们创建一个参照物节点rule，作为textarea的参照节点

 

<div id="rule">
<span class="before">光标前的内容</span>
<span class="flag">@</span>
<span class="after">光标后的内容</span>
</div>

 

首先让rule节点复制textarea所有的样式，然后利用我们之前获取的光标位置，把光标前的内容放入before节点，之后的内容放入after节点，这样的话rule就会长得textarea一模一样。

然后很容易算出flag节点("@")相对与父节点rule的位置。这个位置也就等于输入框中“@”字符相对textarea的位置。

然后在算出的位置上显示好友列表，如图1所示。

 

源码地址：

https://github.com/liyugit/weibo_range