转载请注明: TheViper http://www.cnblogs.com/TheViper 在输入框中@好友这个功能很常见,具体效果大概有两种:1.像js实现@提到好友,在输入框中输入@时,根据@后面的字符,弹出相应好友菜单。2.增加一个按钮,点击后出现包含所有好 ...
转载请注明: TheViper http://www.cnblogs.com/TheViper
在输入框中@好友这个功能很常见,具体效果大概有两种:
1.像js实现@提到好友,在输入框中输入@时,根据@后面的字符,弹出相应好友菜单。
2.增加一个按钮,点击后出现包含所有好友的弹出层。
本文就介绍本屌在实现第二种@时走过的一些坑。为了简单,其中的什么弹出层,拉数据就不说了。
先说下要求:
1.添加@好友时,无论编辑器有没有焦点,@好友都会被添加到上一个焦点位置,效果和更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)中的一样。
2.添加到上一个焦点位置后,无论编辑器有没有焦点,光标自动出现在@好友之后。
3.如果要删除@,必须是@+好友一块删除,就像关于qq空间评论回复的一点研究中删除回复好友一样。
4.同2类似,删除整块@好友后,光标停留到@好友前面的位置。
5.兼容firefox,chrome,ie6 7 8.
第一点和第二点用更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)就很容易实现,只不过这里传入的不是img src地址,而是html.至于传入的html,还是firefox传入<img>标签.
html="<img onclick='return false;' contenteditable='false' class='mention'> ";
原标题:另一种场景下的js @提到好友
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。