你的位置:首页 > 软件开发 > Java > 另一种场景下的js @提到好友

另一种场景下的js @提到好友

发布时间:2015-07-10 03:00:21
转载请注明: TheViper http://www.cnblogs.com/TheViper 在输入框中@好友这个功能很常见,具体效果大概有两种:1.像js实现@提到好友,在输入框中输入@时,根据@后面的字符,弹出相应好友菜单。2.增加一个按钮,点击后出现包含所有好 ...

转载请注明: TheViper http://www.cnblogs.com/TheViper 

在输入框中@好友这个功能很常见,具体效果大概有两种:

1.像js实现@提到好友,在输入框中输入@时,根据@后面的字符,弹出相应好友菜单。

另一种场景下的js @提到好友

2.增加一个按钮,点击后出现包含所有好友的弹出层。

另一种场景下的js @提到好友

本文就介绍本屌在实现第二种@时走过的一些坑。为了简单,其中的什么弹出层,拉数据就不说了。

先说下要求:

1.添加@好友时,无论编辑器有没有焦点,@好友都会被添加到上一个焦点位置,效果和更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)中的一样。

2.添加到上一个焦点位置后,无论编辑器有没有焦点,光标自动出现在@好友之后。

3.如果要删除@,必须是@+好友一块删除,就像关于qq空间评论回复的一点研究中删除回复好友一样。

另一种场景下的js @提到好友

4.同2类似,删除整块@好友后,光标停留到@好友前面的位置。

5.兼容firefox,chrome,ie6 7 8.

第一点和第二点用更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)就很容易实现,只不过这里传入的不是img src地址,而是html.至于传入的html,还是firefox传入<img>标签.

html="<img  onclick='return false;' contenteditable='false' class='mention'>&nbsp;";

原标题:另一种场景下的js @提到好友

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。