仿微信、qq聊天，@好友功能
文章主要介绍我们平时用的qq，微信输入框里面的@功能
如图，输入@符号 会出现一个ul ul的位置随着@符号的位置变动
下面是代码 希望对大家有用 直接全部复制，在编辑器中打开 即可
<!DOCTYPE html>
<html> <head>
<title>聊天</title>
<style>
body,
html {
padding: 0;
margin: 0;
}
.count{
background-color: pink;
}
</style> </head> <body>
<textarea id="text" onkeyup="show(this)" style="width: 340px; height: 210px;"></textarea>
<br />
<div id="show" style=" position: absolute;border:1px solid grey;font-size:13px; display:none;">
<ul id="ul1" style="width:100px;padding: 0 ;list-style:none;">
<li >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="count">6</li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript">
function show(elem) {
var p = kingwolfofsky.getInputPositon(elem);
var s = document.getElementById('show');
var len = $('#text').val()
var lengths=len.slice(0, document.getElementById('text').selectionStart) //光标位置 if (lengths.charAt(lengths.length-1)=='@') {
s.style.display = 'block';
s.style.top = p.bottom + 'px';
s.style.left = p.left + 'px';
$("ul li:last-child").addClass("count").siblings().removeClass('count');
return
}else{
s.style.display = 'none';
return
} if ($('#text').val().indexOf('@') > -1 && document.getElementById('text').selectionStart == $('#text').val().length) {
s.style.display = 'block';
s.style.top = p.bottom + 'px';
s.style.left = p.left + 'px';
$("ul li:last-child").addClass("count").siblings().removeClass('count');
} else {
s.style.display = 'none';
return
} }
var kingwolfofsky = {
/**
* 获取输入光标在页面中的坐标
* @param {HTMLElement} 输入框元素
* @return {Object} 返回left和top,bottom
*/
getInputPositon: function (elem) {
if (document.selection) { //IE Support
elem.focus();
var Sel = document.selection.createRange();
return {
left: Sel.boundingLeft,
top: Sel.boundingTop,
bottom: Sel.boundingTop + Sel.boundingHeight
};
} else {
var that = this;
var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}';
var none = '<span style="white-space:pre-wrap;"> </span>';
var div = elem[cloneDiv] || document.createElement('div'), focus = elem[cloneFocus] || document.createElement('span');
var text = elem[cloneLeft] || document.createElement('span');
var offset = that._offset(elem), index = this._getFocus(elem), focusOffset = { left: 0, top: 0 }; if (!elem[cloneDiv]) {
elem[cloneDiv] = div, elem[cloneFocus] = focus;
elem[cloneLeft] = text;
div.appendChild(text);
div.appendChild(focus);
document.body.appendChild(div);
focus.innerHTML = '|';
focus.style.cssText = 'display:inline-block;width:0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;';
div.className = this._cloneStyle(elem);
div.style.cssText = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;';
};
div.style.left = this._offset(elem).left + "px";
div.style.top = this._offset(elem).top + "px";
var strTmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>').replace(/\s/g, none);
text.innerHTML = strTmp; focus.style.display = 'inline-block';
try { focusOffset = this._offset(focus); } catch (e) { };
focus.style.display = 'none';
return {
left: focusOffset.left,
top: focusOffset.top,
bottom: focusOffset.bottom
};
}
}, // 克隆元素样式并返回类
_cloneStyle: function (elem, cache) {
if (!cache && elem['${cloneName}']) return elem['${cloneName}'];
var className, name, rstyle = /^(number|string)$/;
var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8:outline && outlineWidth
var cssText = [], sStyle = elem.style; for (name in sStyle) {
if (!rname.test(name)) {
val = this._getStyle(elem, name);
if (val !== '' && rstyle.test(typeof val)) { // Firefox 4
name = name.replace(/([A-Z])/g, "-$1").toLowerCase();
cssText.push(name);
cssText.push(':');
cssText.push(val);
cssText.push(';');
};
};
};
cssText = cssText.join('');
elem['${cloneName}'] = className = 'clone' + (new Date).getTime();
this._addHeadStyle('.' + className + '{' + cssText + '}');
return className;
}, // 向页头插入样式
_addHeadStyle: function (content) {
var style = this._style[document];
if (!style) {
style = this._style[document] = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
};
style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content));
},
_style: {}, // 获取最终样式
_getStyle: 'getComputedStyle' in window ? function (elem, name) {
return getComputedStyle(elem, null)[name];
} : function (elem, name) {
return elem.currentStyle[name];
}, // 获取光标在文本框的位置
_getFocus: function (elem) {
var index = 0;
if (document.selection) {// IE Support
elem.focus();
var Sel = document.selection.createRange();
if (elem.nodeName === 'TEXTAREA') {//textarea
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(elem);
var index = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
index++;
};
}
else if (elem.nodeName === 'INPUT') {// input
Sel.moveStart('character', -elem.value.length);
index = Sel.text.length;
}
}
else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support
index = elem.selectionStart;
}
return (index);
}, // 获取元素在页面中位置
_offset: function (elem) {
var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement;
var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop, left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft;
return {
left: left,
top: top,
right: left + box.width,
bottom: top + box.height
};
}
};
//$(".text")为要插入的文本框
//insertContent("( )")括号内为要插入的内容
(function ($) {
$.fn.extend({
insertContent: function (myValue, t) {
var $t = $(this)[0];
if (document.selection) { // ie
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
sel.moveStart('character', -l);
var wee = sel.text.length;
if (arguments.length == 2) {
var l = $t.value.length;
sel.moveEnd("character", wee + t);
t <= 0 ? sel.moveStart("character", wee - 2 * t
- myValue.length) : sel.moveStart(
"character", wee - t - myValue.length);
sel.select();
}
} else if ($t.selectionStart
|| $t.selectionStart == '0') {
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos)
+ myValue
+ $t.value.substring(endPos,
$t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
if (arguments.length == 2) {
$t.setSelectionRange(startPos - t,
$t.selectionEnd + t);
this.focus();
}
} else {
this.value += myValue;
this.focus();
}
}
})
})(jQuery); //点击选中事件
$('li').on('click',function(e){
e.stopPropagation()
var target = e.target || e.srcElement;
var content = target.innerHTML
$("#text").insertContent(content);
document.getElementById('show').style.display = 'none';
}).on('mouseover',function(e){
$(this).addClass("count").siblings().removeClass('count');
})
//点击输入框让ul消失
$("#text").on('click',function(e){
document.getElementById('show').style.display = 'none';
}) </script>
仿微信、qq聊天，@好友功能的更多相关文章
- 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用：腾讯云TXIM即时通讯的最佳实践
基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...
- Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat. tauri-chat 运用最新tauri+vue3+vite3+element-plus+v3layer等 ...
- uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能. 1: 聊天会话管理 2: 好友列表 3: 文字.语音.视频.表情.位置等聊天消息收发 4: ...
- Vue3.0网页版聊天|Vue3.x+ElementPlus仿微信/QQ界面|vue3聊天实例
一.项目简介 基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现 ...
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- Android特效专辑（九）——仿微信雷达搜索好友特效，逻辑清晰实现简单
Android特效专辑(九)--仿微信雷达搜索好友特效,逻辑清晰实现简单 不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今 ...
- Android 高仿微信实时聊天 基于百度云推送
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天终于有幸利用百 ...
- Android 高仿微信即时聊天 百度云为基础的推
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/38799363 ,本文出自:[张鸿洋的博客] 一直在仿微信界面,今天最终有幸利用百 ...
- html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...
- Android 高仿微信语音聊天页面高斯模糊效果
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
随机推荐
- javascript 对象的创建与继承模式
针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 6.1理解对象 创建对象的两个方法(暂时) //第一种,通过创建一个Object ...
- 记录下vue keep-alive IOS下无法保存滚动scroll位置的问题
最近 做的项目,遇到了一点小麻烦,就是我一个页面A页面是加载 列表数据 ,B页面是展示详细信息的.A进去B时,缓存A页面. 效果 做出来 后,缓存是缓存数据 了,但是当我A页面的列表数据 好多,要滚动 ...
- Spring cloud简单学习总结
微服务简介 一.spring boot和spring cloud 的关系 spring boot来写各个拆分出来的微服务,spring cloud把各个微服务联系起来,比如各个微服务通过eurke找 ...
- Python在Linux环境中安装Thrift
1.文件下载:thrift-0.11.0.tar.gz 个人网盘下载:链接:https://pan.baidu.com/s/1MXgx8LuN4wk7ssVUD9Wzaw 提取码:xw85 2. ...
- pod install/update失败：Failed to connect to 127.0.0.1 port 1080: Connection refused
出现这类错误,通常是因为代理发生的,取消代理即可! 1.查看有无相关代理: git config --global http.proxy git config --global https.proxy ...
- websocket 的基本用法
项目当中使用到了websocket,以前的项目当中使用到了另外一个类似的socket.io,两者的区别和联系在另外一篇文章当中有提及,这里就简单的写下websocket的用法 下面的例子是阮一峰的We ...
- json转dataframe格式
方法1:利用pandas自带的read_json直接解析字符串 方法2:利用json的loads和pandas的json_normalize进行解析 方法3:利用json的loads和pandas的D ...
- Discuz!开发之时间处理函数dgmdate()详解
使用过Discuz!的朋友都会知道Discuz!的时间可以显示成多少秒前.多少分钟前.几个小时前.几天前等等,而不是单纯的显示标准时间,这样的时间显示方式就更显得人性化了! 那么Discuz!是如 ...
- Escape character is ‘^]’什么意思?怎么使用telnet
在linux/unix下使用telnet(telnet ip 端口号)连接主机时提示“Escape character is '^]'.”,这是什么意思?“^”是Ctrl键的意思!1.这个提示的意思是 ...
- 17-C#笔记-类
1. 构造函数.析构函数 修饰词的作用域仅一行. 类的默认访问标识符是 internal,成员的默认访问标识符是 private. using System; namespace LineApplic ...