仿微信、qq聊天，@好友功能

最新推荐文章于 2022-08-22 17:43:10 发布
最新推荐文章于 2022-08-22 17:43:10 发布
阅读量516 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/houjl/p/10718657.html
版权

文章主要介绍我们平时用的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>

 

转载于:https://www.cnblogs.com/houjl/p/10718657.html

weixin_30517001
关注
仿微信、QQ的@功能
u014452970的博客
02-25 3802
仿微信、QQ的@功能 前言：前一段时间，公司有一个项目需要加入@功能，我当时也没有啥思路，然后去网上看看有没有前人写过类似的文章或者代码。然后我在这里http://download.csdn.net/detail/u011818090/8534377找到了别人写的仿微博的@功能，感觉还可以，但是和我的需求不一样，所以就自己根据需求改编了他的代码。下面就讲讲我的@功能。 首先是需求：公司项目
仿QQ微信群组里的@功能
09-23
在IT行业中，实现类似QQ和微信群组中的“@某人”功能是一项常见的需求，它能够增强用户间的互动性，提高沟通效率。这个功能的核心在于消息通知和用户提及系统的实现。 首先，我们要理解“@某人”功能的工作原理。在...
仿微信qq聊天界面
06-14
仿微信qq聊天界面eclipse版本，已实际运用在项目，可运行 1、点击输入框，软键盘会往上顶，标题栏不会被顶出去，标题栏固定在最上面 2、含有4页表情包 3、跟qq，微信一样，点击发送，软键盘不会缩回去，还显示着 4、聊天列表效果
仿微信群@好友功能
weixin_34318956的博客
03-21 772
最近需要实现一个类似微信群聊中@好友的功能，搜了一圈之后发现没有源码可以借鉴，于是只好自己动手实现了。先看一下实现之后的效果 复制代码 可以看到，无论是@添加一个好友，还是删除一个“@+好友”，都是将这个“@+好友”当作一个整体来实现的。添加的时候当作整体，这个 很容易想到，就是用Span。但是在删除的时候，首先要能拦截到软键盘的按下事件，然后再去查看当前光标的位置，看是否在“@+好友” ...
基于Android的仿QQ微信聊天系统
04-05
一个基于Android设计的聊天系统 采用的是sqlserver2005数据库， 一共4个表 yq_buddy 是好友信息表 yd_group是群组信息表 yq_group_member是群成员信息表 yq_user是用户信息表哦 YQ_Server是服务器端程序 YQ是手机客户端程序 服务器端运行在电脑上 整个聊天过程采用的是气泡方式呈现 这个系统程序朋友给我的 我测试好像不能通过界面添加好友 只能去数据库中添加
仿微信QQ聊天UI源码.zip
07-10
仿微信QQ聊天UI源码带有表情，可以翻页，带翻页拖动缓冲等功能。  
基于Android的仿QQ微信聊天系统 (2).zip
01-27
【描述】: "基于Android的仿QQ微信聊天系统 (2)" 这个描述暗示了这是一个项目或教程的第二部分，目的是为开发者提供构建一个功能齐全、用户体验良好的聊天应用程序的指导。这种类型的项目通常会涵盖用户注册与登录、...
青柚仿微信H5聊天系统即时通讯社交完整优化版，带安卓苹果端APP源码+视频教程.zip
最新发布
08-11
在本项目中，"青柚仿微信H5聊天系统"实现了即时通讯的核心功能，包括但不限于： 1. **登录注册**：用户可以通过账号密码或者第三方账号（如微信、QQ等）进行登录注册。 2. **好友系统**：添加、删除、搜索好友，...
仿微信聊天功能
10-27
仿微信聊天界面，实现录音取消录音等功能，未实现聊天功能。
基于vue2.x + vant2.x 实现的仿微信 @ 功能.zip
05-18
功能描述：基于vue2.x + vant2.x 实现的仿微信@功能(稍作修改即可支持原生js和react)，兼容pc端和手机端，如有bug，欢迎提出~ 功能亮点 自定义弹窗样式及内容 动态绑定用户信息 兼容vue、react及原生js 兼容pc端和移动端
IOS实现仿qq好友列表功能
专业划水20年
08-26 895
ios开发之实现仿qq好友列表功能 // // UserTableViewCell.h // UITableView协议 // // Created by mouweng on 17/8/26. // Copyright © 2017年 mouweng. All rights reserved. // #import @interface UserTableViewCell
Vue PC端@功能实现
qq_38211205的博客
04-22 3288
一：前言 近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~ 二：思路 我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。 三：需求拆解 按住shift + @ 的时候，弹出人员选择器 人员选择器要跟随光标的位置出现
Android仿微信@好友功能 输入@跳转、删除整块
08-29
主要介绍了Android仿微信@好友功能 输入@跳转、删除整块,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
ios 实现艾特功能（第二种）
lishiyong92的专栏
05-27 1967
附上代码 - (instancetype)initWithFrame:(CGRect)frame {     self = [super initWithFrame:frame];     if (self) {         self.nameArray = [NSMutableArray array];         self.deleg
仿QQ 微信@功能
09-23
仿QQ 微信@功能
js仿微信聊天
qq_39462734的博客
08-22 1296
【代码】js仿微信聊天。
Android端IM应用中的@人功能实现：仿微博、QQ、微信，零入侵、高可扩展
hellojackjiang2011的博客
12-23 2405
本文由“猫爸iYao”原创分享，感谢作者。 1、引言 最近有个需求：评论@人（没错，就是IM聊天或者微博APP里的@人功能），就像下图这样： ▲ 微信群聊界面里的@人功能  ▲ QQ群聊界面里的@人功能 网上已经有一些文章分享了类似功能实现逻辑，但是几乎都是扩展EditText类，这种实现方式肯定不能进入我的首发阵容。你以为是因为它不符合面向对象六大原则？错，只因为它不够优雅！不...
仿微信@好友功能 輸入@跳转、删除整块
大帅在唱歌
10-30 2156
最近在做聊天功能的时候，有一个需求是仿照微信做@好友的功能，本来以为挺简单，但是做到这块的时候，发现和想象的有点不一样，什么整块删除，块可编辑，总之，加个@的功能很简单，但是要做和微信的一样还是费了一些功夫，下面是一个demo仅供参考，防止遗忘 先上个效果图就是这么个功能我又照着做了这个，仅供参考1. 分析需求 输入@跳转到联系人界面，选中一个或者多个好友返回到当前界面 按退格键删除整块内容 块内的
如何通过Vue实现@人的功能
嘿嘿
07-08 2898
如何通过Vue实现@人的功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值