新浪微博中@功能的实现
来源:互联网 发布:网络准确率的计算公式 编辑:程序博客网 时间:2024/04/29 23:20
实现该功能大致需要三步
第一步:定位输入框中的光标的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; //阻止事件的冒泡和键盘事件的默认行为}});
- 新浪微博中@功能的实现
- 实现类似于新浪微博@的功能
- 实现类似于新浪微博的@功能
- 新浪微博 分享 功能的实现
- 新浪微博下拉刷新功能的实现
- Android开发实现新浪账号授权登录的功能
- 实现新浪微博授权一次、多次登录的功能
- 实现新浪微博授权一次多次登录的功能
- Java基于新浪微博SDK实现发微博的功能
- 获取新浪天气预报的功能
- android 新浪微博分享功能实现
- android 新浪微博实现分享功能
- 实现类似新浪微博@人功能
- android 新浪微博客户端的表情功能的实现
- android 新浪微博客户端的表情功能的实现
- android 新浪微博客户端的表情功能的实现
- android 新浪微博客户端的表情功能的实现
- android 新浪微博客户端的表情功能的实现
- 第007课 汇编-认识内存[]
- ASP.NET 抓取网页内容
- linux安装unzip
- ASP.NET(二) Web开发——内置对象
- hdu 2108 Shape of HDU
- 新浪微博中@功能的实现
- 2013年 我也要毕业了
- 学习
- hibernate配置笔记
- 第008课 汇编-操作[]
- 拓扑排序与AOV
- intent-filter详解
- 友元关系与继承
- Eclipse找回Courser-New字体