微博@符号的用户名提示效果。(想@到谁?)


Posted in Javascript onNovember 05, 2010

在下面的文本框输入“@” 看一下效果吧!

已经解决 IE,FF ,CHORME 主流浏览器的兼容问题。有需要这个JS的朋友可以直接拿去用。

由于我实在无法把这个效果插入到这遍文章里。所以只能让大家下载我演示的文件了。

下载演示文件

微博@符号的用户名提示效果。(想@到谁?) 
思路

我们可以用onkeyup事件监测文本框是否输入了一个@符号,如果输入了,就找到@符号在页面上的绝对位置,弹出提示。(实际制作过程中会遇到各种各样的问题)
问题: textarea 里的光标位置无法直接获取。
所以我们只能迂回前进了。
解决弹出框的位置

首先你是针对网页里面的textarea(这是一个很麻烦的标签) 这个标签的一些操作。

所以关于他的一些API你必须收集到。(下面会有提供)

  微博@符号的用户名提示效果。(想@到谁?)
  A:是一个textarea 

  B:当前光标位置

 

 我们的方案是 首先在页面创建一个(C)具有 visibility:hidden;(占位但是不显示) 属性的DIV。

 他的位置,宽度,高度与A文本框一样(这意味着C现在与A已经重叠了)。 

 然后我们获取到B位置前面的所有文本(可以用js获取到),写入C 里面,在追加一个<span id='FFF'></span>;

 那么ID为FFF 的span标签的位置就是 B的位置。

 HTML页面会多了一些这样的标签
 <div id="c">这你是一个textarea @<span id='FFF'></span><div>

 可以获取到@符号的位置,其他问题都只是调试的问题了,就不多说了。你可以直接下载源码
textarea 的一些操作

/* 
* TT textarea 操作函数 
* info(t) 基本信息 
* getCursorPosition(t) 光标位置 
* setCursorPosition(t, p) 设置光标位置 
* add(t,txt) 添加内容到光标处 
*/ 
var TT = { 
info:function(t){ 
var o = t.getBoundingClientRect(); 
var w = t.offsetWidth; 
var h = t.offsetHeight; 
return {top:o.top, left:o.left, width:w, height:h}; 
}, 
getCursorPosition: function(t){ 
if (document.selection) { 
t.focus(); 
var ds = document.selection; 
var range = null; 
range = ds.createRange(); 
var stored_range = range.duplicate(); 
stored_range.moveToElementText(t); 
stored_range.setEndPoint("EndToEnd", range); 
t.selectionStart = stored_range.text.length - range.text.length; 
t.selectionEnd = t.selectionStart + range.text.length; 
return t.selectionStart; 
} else return t.selectionStart 
}, 
setCursorPosition:function(t, p){ 
var n = p == 'end' ? t.value.length : p; 
if(document.selection){ 
var range = t.createTextRange(); 
range.moveEnd('character', -t.value.length); 
range.moveEnd('character', n); 
range.moveStart('character', n); 
range.select(); 
}else{ 
t.setSelectionRange(n,n); 
t.focus(); 
} 
}, 
add:function (t, txt){ 
var val = t.value; 
var wrap = wrap || '' ; 
if(document.selection){ 
document.selection.createRange().text = txt; 
} else { 
var cp = t.selectionStart; 
var ubbLength = t.value.length; 
t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength); 
this.setCursorPosition(t, cp + txt.length); 
}; 
}, 
del:function(t, n){ 
var p = this.getCursorPosition(t); 
var s = t.scrollTop; 
t.value = t.value.slice(0,p - n) + t.value.slice(p); 
this.setCursorPosition(t ,p - n); 
D.FF && setTimeout(function(){t.scrollTop = s},10); 
} 
}

主要的一些JS
var AutoTips = function(A){ 
var elem = A.id ? D.$(A.id) : A.elem; 
var checkLength = 5; 
var _this = {}; 
var key = ''; 
_this.start = function(){ 
if(!D.$(config.boxID)){ 
var h = html.slice(); 
var info = TT.info(elem); 
var div = D.DC('DIV'); 
var bs = D.BS(); 
h = h.replace('$top$',(info.top + bs.top)). 
replace('$left$',(info.left + bs.left)). 
replace('$width$',info.width). 
replace('$height$',info.height). 
replace('$SCTOP$','0'); 
div.innerHTML = h; 
document.body.appendChild(div); 
}else{ 
_this.updatePosstion(); 
} 
} 
_this.keyupFn = function(e){ 
var e = e || window.event; 
var code = e.keyCode; 
if(code == 38 || code == 40 || code == 13) { 
if(code==13 && D.$(config.wrap).style.display != 'none'){ 
_this.enter(); 
} 
return false; 
} 
var cp = TT.getCursorPosition(elem); 
if(!cp) return _this.hide(); 
var valuep = elem.value.slice(0, cp); 
var val = valuep.slice(-checkLength); 
var chars = val.match(/(\w+)?@(\w+)$|@$/); 
if(chars == null) return _this.hide(); 
var char = chars[2] ? chars[2] : ''; 
D.$(config.valuepWrap).innerHTML = valuep.slice(0,valuep.length - char.length).replace(/\n/g,'<br/>'). 
replace(/\s/g,' ') + config.positionHTML; 
_this.showList(char); 
} 
_this.showList = function(char){ 
key = char; 
var data = DS.inquiry(friendsData, char, 5); 
var html = listHTML.slice(); 
var h = ''; 
var len = data.length; 
if(len == 0){_this.hide();return;} 
var reg = new RegExp(char); 
var em = '<em>'+ char +'</em>'; 
for(var i=0; i<len; i++){ 
var hm = data[i]['user'].replace(reg,em); 
h += html.replace(/\$ACCOUNT\$|\$NAME\$/g,data[i]['name']). 
replace('$SACCOUNT$',hm).replace('$ID$',data[i]['user']); 
} 
_this.updatePosstion(); 
var p = D.$(config.position).getBoundingClientRect(); 
var bs = D.BS(); 
var d = D.$(config.wrap).style; 
d.top = p.top + 20 + bs.top + 'px'; 
d.left = p.left - 5 + 'px'; 
D.$(config.listWrap).innerHTML = h; 
_this.show(); 
} _this.KeyDown = function(e){ 
var e = e || window.event; 
var code = e.keyCode; 
if(code == 38 || code == 40 || code == 13){ 
return selectList.selectIndex(code); 
} 
return true; 
} 
_this.updatePosstion = function(){ 
var p = TT.info(elem); 
var bs = D.BS(); 
var d = D.$(config.boxID).style; 
d.top = p.top + bs.top +'px'; 
d.left = p.left + bs.left + 'px'; 
d.width = p.width+'px'; 
d.height = p.height+'px'; 
D.$(config.boxID).scrollTop = elem.scrollTop; 
} 
_this.show = function(){ 
selectList.list = D.$(config.listWrap).getElementsByTagName('li'); 
selectList.index = -1; 
selectList._this = _this; 
_this.cursorSelect(selectList.list); 
elem.onkeydown = _this.KeyDown; 
D.$(config.wrap).style.display = 'block'; 
} 
_this.cursorSelect = function(list){ 
for(var i=0; i<list.length; i++){ 
list[i].onmouseover = (function(i){ 
return function(){selectList.setSelected(i)}; 
})(i); 
list[i].onclick = _this.enter; 
} 
} 
_this.hide = function(){ 
selectList.list = null; 
selectList.index = -1; 
selectList._this = null; 
D.ER(elem, 'keydown', _this.KeyDown); 
D.$(config.wrap).style.display = 'none'; 
} 
_this.bind = function(){ 
elem.onkeyup = _this.keyupFn; 
elem.onclick = _this.keyupFn; 
elem.onblur = function(){setTimeout(_this.hide, 100)} 
//elem.onkeyup= fn; 
//D.EA(elem, 'keyup', _this.keyupFn, false) 
//D.EA(elem, 'keyup', fn, false) 
//D.EA(elem, 'click', _this.keyupFn, false); 
//D.EA(elem, 'blur', function(){setTimeout(_this.hide, 100)}, false); 
} 
_this.enter = function(){ 
TT.del(elem, key.length, key); 
TT.add(elem, selectList.list[selectList.index].getElementsByTagName('A')[0].rel+' '); 
_this.hide(); 
return false; 
} 
return _this; 
}

作者:idche
Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 #Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 #Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 #Javascript
基于jQuery的仿flash的广告轮播
Nov 05 #Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 #Javascript
基于jquery的loading效果实现代码
Nov 05 #Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 #Javascript
You might like
PHP 强制下载文件代码
2010/10/24 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP7多线程搭建教程
2017/04/21 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
php-fpm中max_children的配置
2019/03/15 PHP
js null undefined 空区别说明
2010/06/13 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JSON相关知识汇总
2015/07/03 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python原始套接字编程实例解析
2020/01/29 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
EJB的激活机制
2013/10/25 面试题
总经理助理的八要求
2013/11/12 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
党员四风剖析材料
2014/08/27 职场文书
2015年调度员工作总结
2015/04/30 职场文书
工作证明书
2015/06/15 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
python实现A*寻路算法
2021/06/13 Python