新浪微博中@功能的实现

实现该功能大致需要三步

第一步：定位输入框中的光标的top和left属性

IE中很容易实现。直接调用document.selection.createRange()即可

if (document.selection) {
elem.focus();
var Sel = document.selection.createRange();
return {
left: Sel.boundingLeft,
top: Sel.boundingTop,
bottom: Sel.boundingTop + Sel.boundingHeight
};
}

FF中却不容易。对于firefox之类的浏览器则通过模拟来实现，如下图所示。首先通过拷贝输入区域的样式到一个div层（clone层，position设置为absoulte），然后在此clone层之中的text子层添加光标之前的字符，并在text子层之后添加focus层，focus层中包含字符“|”来模拟光标，进而通过获取focus层的偏移量即可获得文本光标的像素坐标位置

第二步：设计弹出框的样式，这一步很简单直接参考新浪微博即可

第三步：设计鼠标、键盘事件（这里我们以向下键盘事件为例）

$("#"+elementName).keydown(function(ev){If(ev.keyCode == 40){.....    //进行样式的渲染return false;   //阻止事件的冒泡和键盘事件的默认行为
}
});

新浪微博中@功能的实现相关推荐

mysql 关注表设计_mysql - 新浪微博中的关注功能是如何设计表结构的？
问题新浪微博中,假如a关注了200个用户,300个用户关注了a,点解的时候会看到所有关注a或者a关注的用户,这种表结构是如何实现的? 解决方案个人简单猜测,如有雷同,纯属巧合!有错误请指正! u ...
android 分享到微博客户端,Android APP集成新浪微博分享功能
本文为大家分享了新浪微博分享功能集成,供大家参考,具体内容如下直接导入weibosdkcore.jar:适用于只需要授权.分享.网络请求框架功能的项目. 无论使用哪一种方式,都需要先将demo中li ...
极简主义_网页设计中功能极简主义的真实性要少得多
极简主义 Written by Jessica Bennett 由杰西卡·贝内特 ( Jessica Bennett)撰写介绍 (Introduction) "Less is more&q ...
可能是目前轻量级弹幕控件中功能最强大的一款
本项目是一个开源的弹幕控件库,能够支持多种样式弹幕,弹幕点击监听,弹幕分区域显示,自定义移动速度等功能,项目原理是通过自定义ViewGroup.可能是目前轻量级弹幕控件中功能最强大的一款了. Gith ...
js实现QQ、微信、新浪微博分享功能
使用js实现QQ.微信.新浪微博分享功能. 微信分享需要手机扫描二维码,需要对url进行编码.在https协议下,扫描二维码时,浏览器打不开可能是没有安全证书导致的. js代码: 1 var shar ...
mysql 关注表设计_新浪微博中的关注功能是如何设计表结构的？
个人简单猜测,如有雷同,纯属巧合!有错误请指正! user_relation - 用户关系表 user_id - 用户ID follower_id - 被关注者用户ID relation_type - ...
友盟的微信登录，QQ，新浪微博登录功能和分享功能
在这里我用的是友盟的登录,需要的请参考本文,直接撸代码, 提示:微信登录在一段时间内,只授权一次(只能调起一次登录页面),除非更换用户,才可以再调起登录页面. 0.本文需要导入jar包导完后鼠标右键A ...
两国的“微”与“博”——Twitter与新浪微博的功能差异化探究
科技是一把切割刀,刀锋所及,无论是时间.生活.情感抑或思维.都成为碎片化的存在.微博.Twitter迎合着人们碎片化的需求,在夹缝中寻找到了生存的契机.然而微博在中国与Twitter在美国,各自的生态 ...
Redis在新浪微博中的应用
Redis简介 1. 支持5种数据结构支持strings, hashes, lists, sets, sorted sets. string是很好的存储方式,用来做计数存储.sets用于建立索引库非 ...

新浪微博中@功能的实现

新浪微博中@功能的实现相关推荐

最新文章

热门文章