用Javascript分析微博@功能

这篇文章主要介绍“用Javascript分析微博@功能”，在日常操作中，相信很多人在用Javascript分析微博@功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用Javascript分析微博@功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！对这个功能进行分析如下：1、确定光标的位置2、textarea文本框里对字符串@的判断3、tip的弹出事件4、键盘的操作事件5、ajax调用6、文字的插入当然还有其他的功能。看着是不是感觉很复杂？没关系，我们一步一步的分析。首先我们要确定textarea的光标位置。在W3C中，获取光标位置比较简单，可以用selectionStart和selectionEnd，IE浏览器不支持这2个属性 ，但是IE又一个document.selection对象，可以模拟实现相同的功能。代码如下：自定义一个rangeData对象，保存光标的位置和textarea框内从光标位置到开始处的字符串；返回出来。这个对象在下面其他函数中会用到免费云主机、域名。根据光标位置的确定，可以书写文字插入函数add();有了上面的函数，我们可以对textarea框内@的字符判断，然后实现tip层定位和弹出，如果判断这个，我们可以用正则：那么定位呢，若在textarea内判断是不现实的，因为我们无法获取正确的left和top值，所以这里需要模拟一个div层，将div插入到body 中，定位到与textarea相同的位置，然后获取到textarea内的文字，进行字符串的拆分，加上标签元素，这样可以获取到正确的位置。说的有点绕了，看下面代码能更直观的表达。看到这句，很多人应该理解做法，将这段append到上诉定位的div中，这样，我们可以通过标签获取到offset值了。于是我们写下面的代码:然后我们添加键盘的操作，这里注意的是，我们在textarea输入文字的时候已经绑定keyup事件，为了避免事件多次绑定，tip的选择我们用keydown事件处理。然后添加tip的点击事件和hover事件。到此，关于“用Javascript分析微博@功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: css如何实现对选择器和声明分组的不同方法

这篇文章主要介绍了css如何实现对选择器和声明分组的不同方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法： 亲自试…