web前端实现@提醒功能

最新推荐文章于 2024-06-21 15:33:20 发布
最新推荐文章于 2024-06-21 15:33:20 发布
阅读量5.5k 收藏 9
点赞数 1
分类专栏： javascript web API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WaterSprite_ct/article/details/79467100
版权

web前端实现@提醒功能

@xxx功能很多地方用到，比如微博、微信、qq这些通信的都有用到，那么这个功能是如何实现的？

在开始实现功能前，先整理一下思路：

  • 输入@后将列表选择框显示出来
  • 点击选择框中的选项时，返回输入框
  • 在输入框中显示@xxx
  • 将光标放置@xxx之后
  • 删除@xxx时需要整个@xxx一起删除
  • 需要考虑兼容性问题

主要涉及的方法技术点：

  1. 获取Selection对象，Selection对象表示页面中的文本选区，window.getSelection()获取
  2. 获取光标在文本选区的光标信息Range对象（表示包含节点和部分文本节点的文档片段），Selection.getRangeAt(0)获取、document.createRange()获取、通过构造函数range()获取
  3. 获取光标的位置作为列表选择框的位置，通过jquery.caret的$(ele).caret('offset')获取相对窗口的位置
  4. 保存当前的光标的信息，包括range、offset、selection对象
  5. 选提醒人后，需通过获取之前保留的光标信息，通过range.startContainer获取光标前的文本
  6. range.setStart()、range.setEnd()设置光标的选区起始位置，进行选中@字符
  7. range.deleteContents删除光标选区的内容删除
  8. range.insertNode在光标选区中添加内容
  9. selection.extend将选区的焦点移动到一个特定的位置
  10. selection.collapseToEnd将当前的选区折叠到最尾的一个点

Angular框架实现

<!DOCTYPE html>
<html ng-app='@DEMO'>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script src="http://cdn.bootcss.com/Caret.js/0.3.1/jquery.caret.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .demo {
            width: 80%;
            height: 300px;
            border: 2px solid #ccc;
            border-radius: 20px;
            padding: 20px;
            outline: none;
        }

        .demo-wrap {
            position: relative;
        }

        .select-person {
            position: absolute;
            width: 160px;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
        }

        .select-person input {
            width: 100%;
            height: 40px;
            border: none;
            outline: none;
            padding: 0 10px;
        }

        .row {
            display: flex;
            height: 40px;
            border-top: 1px solid #dcdcdc;
            align-items: center;
            cursor: pointer;
        }

        .row:hover {
            background: #ccc;
        }

        .row .col-1 {
            width: 40px;
            flex: 0 0 40px;
        }

        .row .col-2 {
            width: 40px;
            flex: auto;
        }

        .img-wrap {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background: #4caf50;
            margin: auto;
            font-size: 12px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .at-text {
            color: #4caf50;
        }
    </style>
</head>

<body>
<div class="demo-wrap" ng-controller="Controller">
    <!-- 文本输入框 -->
    <div class="demo" id="demo" contenteditable="true" ng-keydown="keyIn($event)"></div>
    <!-- 带有输入框的选人框 -->
    <div class="select-person" id="selectPerson" ng-if="showSelect" ng-style="sPersonPosi">
        <input type="text" id="searchPersonInput" ng-model="personSearchText" ng-blur="missFocus()">
        <ul class="person-wrap">
            <li class="row" ng-click="sPersonDone({fullName:'所有人'})">
                <div class="col-1">
                    <div class="img-wrap">
                        <span ng-bind="'所有'"></span>
                    </div>
                </div>
                <div class="col-2">所有人</div>
            </li>
            <li class="row" ng-click="sPersonDone(item)" ng-repeat="item in atList | filter :{fullName: personSearchText}">
                <div class="col-1">
                    <div class="img-wrap">
                        <span ng-bind="item.fullName.slice(-2)"></span>
                    </div>
                </div>
                <div class="col-2" ng-bind="item.fullName"></div>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    angular.module('@DEMO', [])
        .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {

            $scope.atList = [{
                fullName: '张三'
            }, {
                fullName: '李四'
            }, {
                fullName: '王五'
            }, {
                fullName: '战前孙'
            }]

            $scope.keyIn = function(e) {
                var selection = getSelection();
                var ele = document.getElementById('demo');
                if (e.code == 'Digit2' && e.shiftKey) {
                    console.log(selection);
                    // 保存光标信息
                    lastSelection = {
                        range: selection.getRangeAt(0),
                        offset: selection.focusOffset,
                        selection: selection
                    };
                    $scope.showSelect = true;

                    // 设置弹出框位置
                    var offset = $(ele).caret('offset');
                    $scope.sPersonPosi = {
                        left: offset.left + 'px',
                        top: offset.top + 30 + 'px'
                    };
                    $timeout(function() {
                        $('#searchPersonInput')[0].focus();
                    })

                } else if (e.code == 'Backspace') {

                    // 删除逻辑
                    // 1 ：由于在创建时默认会在 @xxx 后添加一个空格，
                    // 所以当得知光标位于 @xxx 之后的一个第一个字符后并按下删除按钮时，
                    // 应该将光标前的 @xxx 给删除
                    // 2 ：当光标位于 @xxx 中间时，按下删除按钮时应该将整个 @xxx 给删除。

                    var range = selection.getRangeAt(0);
                    var removeNode = null;
                    if (range.startOffset <= 1 && range.startContainer.parentElement.className != "at-text")
                        removeNode = range.startContainer.previousElementSibling;
                    if (range.startContainer.parentElement.className == "at-text")
                        removeNode = range.startContainer.parentElement;
                    if (removeNode)
                        ele.removeChild(removeNode);

                }
            };

            $scope.sPersonDone = function(person) {

                // 成功选人后，关闭选择框，让输入框获取焦点。
                $scope.showSelect = false;
                var ele = $('#demo')[0];
                ele.focus();

                // 获取之前保留先来的信息。
                // 需要修改 keyIn 的代码，保存选区以及光标信息，用于获取在光标焦点离开前，光标的位置
                var selection = lastSelection.selection;
                var range = lastSelection.range;
                var textNode = range.startContainer;

                // 删除 @ 符号。
                range.setStart(textNode, range.endOffset);
                range.setEnd(textNode, range.endOffset + 1);
                range.deleteContents();

                // 生成需要显示的内容，包括一个 span 和一个空格。
                var spanNode1 = document.createElement('span');
                var spanNode2 = document.createElement('span');
                spanNode1.className = 'at-text';
                spanNode1.innerHTML = '@' + person.fullName;
                spanNode2.innerHTML = ' ';

                // 将生成内容打包放在 Fragment 中，并获取生成内容的最后一个节点，也就是空格。
                var frag = document.createDocumentFragment(),
                    node, lastNode;
                frag.appendChild(spanNode1);
                while ((node = spanNode2.firstChild)) {
                    lastNode = frag.appendChild(node);
                }

                // 将 Fragment 中的内容放入 range 中，并将光标放在空格之后。
                range.insertNode(frag);
                selection.extend(lastNode, 1);
                selection.collapseToEnd();
            };

            $scope.missFocus = function() {
                setTimeout(function() {
                    $scope.showSelect = false;
                }, 100);
            }
        }]);
</script>
</html>

js封装实现

function AtMembers(iframs){
    this.lastSelection = null;
    this.sPersonPosi = null;
    this.iframeObj = iframs;
    this.clientWidth = $(window).width();
    this.clientHeight = $(window).height();
    this.init = function () {
        this.getDomObj();
        this.events();
    }
}

AtMembers.prototype.getDomObj = function () {
    this.childWindow = this.iframeObj.contentWindow;
    $(this.iframeObj).contents().find("body").attr('id', 'dynamicText');
    this.textareaObj = this.childWindow.document.getElementById('dynamicText');
    this.memberWrap = $('#memberListAt');
}

AtMembers.prototype.events = function () {
    var self = this;

    //输入框的键盘事件
    this.textareaObj.onkeydown = function (event) {
        var selection = self.childWindow.getSelection();
        var e = event ? event : window.event;
        if ((e.code == 'Digit2' || e.which === 50) && e.shiftKey) {
            // 保存光标信息
            self.lastSelection = {
                range: self.childWindow.document.selection ? self.childWindow.document.selection.createRange() : selection.getRangeAt(0),
                offset: selection.focusOffset,
                selection: selection
            };
            // 设置弹出框位置
            var offset = $(self.textareaObj).caret('offset', {iframe: self.iframeObj});

            offset.left += $(self.iframeObj).offset().left;
            offset.top += $(self.iframeObj).offset().top;
            position = $(self.textareaObj).caret('position', {iframe: self.iframeObj});


            self.sPersonPosi = {
                left: self.clientWidth -300 < offset.left ? (self.clientWidth -300)+'px' : offset.left + 'px',
                top: self.clientHeight -450 < offset.top ? (self.clientHeight -450)+'px' : (offset.top + 30) + 'px'
            };
            self.memberWrap.css(self.sPersonPosi).css({display: 'block'});
        } else if (e.code == 'Backspace') {

            // 删除逻辑
            // 1 ：由于在创建时默认会在 @xxx 后添加一个空格，
            // 所以当得知光标位于 @xxx 之后的一个第一个字符后并按下删除按钮时，
            // 应该将光标前的 @xxx 给删除
            // 2 ：当光标位于 @xxx 中间时，按下删除按钮时应该将整个 @xxx 给删除。

            var range = selection.getRangeAt(0);
            var removeNode = null;
            if (range.startOffset <= 1 && range.startContainer.parentElement.className != "member-at-text"){
                removeNode = range.startContainer.previousElementSibling;
            }

            if (range.startContainer.parentElement.className == "member-at-text"){
                removeNode = range.startContainer.parentElement;
            }
            if (removeNode && removeNode.className === "member-at-text"){
                self.textareaObj.removeChild(removeNode);
            }
        }else{
            self.memberWrap.css({display: 'none'});
        }
    }

    //保存
    this.memberWrap.on('click', 'li', function () {
        self.person = {};
        self.person = {
            id: $(this).attr('data-id'),
            name: $(this).find('span').text()
        };

        self.memberWrap.css({display: 'none'});
        $(self.textareaObj).focus();

        // 获取之前保留先来的信息。
        // 需要修改 keyIn 的代码，保存选区以及光标信息，用于获取在光标焦点离开前，光标的位置
        var selection = self.lastSelection.selection;
        var range = self.lastSelection.range;
        var textNode = range.startContainer;

        // 删除 @ 符号。
        range.setStart(textNode, range.endOffset);
        range.setEnd(textNode, range.endOffset + 1);
        range.deleteContents();

        // 生成需要显示的内容，包括一个 span 和一个空格。
        var spanNode1 = document.createElement('a');
        var spanNode2 = document.createElement('span');
        spanNode1.className = 'member-at-text';
        spanNode1.setAttribute('data-id', self.person.id);
        spanNode1.setAttribute('href', '/user/center/'+self.person.id);
        spanNode1.setAttribute('target', '_blank');
        spanNode1.innerHTML = '@' + self.person.name;
        spanNode2.innerHTML = ' ';

        // 将生成内容打包放在 Fragment 中，并获取生成内容的最后一个节点，也就是空格。
        var frag = document.createDocumentFragment(),
            node, lastNode;
        frag.appendChild(spanNode1);
        while ((node = spanNode2.firstChild)) {
            lastNode = frag.appendChild(node);
        }
        // 将 Fragment 中的内容放入 range 中，并将光标放在空格之后。
        range.insertNode(frag);
        selection.extend(lastNode, 1);
        selection.collapseToEnd();

    });

    $(window).resize(function () {
        self.clientWidth = $(window).width();
        self.clientHeight = $(window).height();
    });
}

Seletion的文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

Range的文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Range

caret的github：http://ichord.github.com/Caret.js/

                    https://www.npmjs.com/package/jquery.caret

caret实现获取光标的位置信息(依赖jquery)

  • 获取相对父元素的偏移量

$('#inputor').caret('position');

  • 获取相对文档的偏移量

$('#inputor').caret('offset');

  • 获取指定位置的光标坐标

var fixPos = 20;

$('#inputor').caret('position', fixPos  );

$('#inputor').caret('offset', fixPos );

  • 在iframe的文本编辑

var iframeObj  = $('#iframeId')[0];

$('#inputor').caret('offset'，{ iframe: iframeObj });


sintina
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Web前端开发之@ 功能 JS 实现原理详解
qq_32506555的博客
12-20 1万+
最近在前端开发中，为实现一个新功能弄的焦头烂额 @xxx 的实现，在实现后写下些心得，供以后会跳入这坑的同志们参考。 首先，当让是考虑使用范围，由于项目仅仅需要考虑在 WEBKIT 环境下使用，所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在 Mozilla 开发者网络 上发现 selection 和 range 这两个关于选区对象和光标对象，结合 Care
自己做的Web前端
08-12
例如，可能有按钮点击事件触发的功能、表单验证、时间日期动态显示等，这些都是JavaScript在Web前端开发中的典型应用场景。 【Web前端】或称“大前端”指的是用户通过浏览器所看到和交互的部分，包括HTML、CSS和...
前端输入框简单实现检测@成员输入
m0_54944506的博客
02-02 389
【代码】前端输入框简单实现检测@成员输入。
【实战】我是如何在输入框实现@ At功能的
程序员成长指北
12-21 1384
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：InfinityTomorrow 授权转载链接：https://juejin.c...
输入框实现@别人功能
最新发布
weixin_66664693的博客
06-21 462
支持复制粘贴概要开发任务系统中，业务需求：需要在任务描述、评论等地方支持@人员功能，可以将任务外部人员添加至当前任务中。功能：1、支持输入@展开下拉，可通过鼠标点击或键盘上下移动 + 回车选中人员；2、支持@后继续输入以搜索人员列表；3、输入框@内容支持复制粘贴；4、添加输入框最大输入限制；整体架构流程因时间紧迫，虽然看到了el-input支持Autocomplete属性，但是没空去研究它了，还是用div + contenteditable="true"开撸吧；
前端实现@功能
weixin_48845614的博客
02-28 1791
思路 键入 @ 后将选择框显示出来 点击选择框中的选项时，返回输入框 输入框中显示 @xxx 将光标定位在 @xxx 以后 删除 @xxx 时须要整个 @xxx 一块儿删除 实现 主要是使用 selection 和 range 这两个关于选区对象和光标对象，结合div 的 contenteditable 属性实现 步骤 先有一个可编辑的 div 元素 <div id="atInput" contenteditable onKeyDown="onKeyDown" /&gt
Vue PC端@功能实现
qq_38211205的博客
04-22 3102
一：前言 近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~ 二：思路 我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。 三：需求拆解 按住shift + @ 的时候，弹出人员选择器 人员选择器要跟随光标的位置出现
前端 @功能的实现，在react、vue中通用
weixin_46554760的博客
02-26 2834
废话不多说，先上需求： 在输入框中输入@后，弹出选人的浮框，然后选择人（可多选），选完后，关闭浮框，然后在输入框中加入@XXX，然后焦点定位刚开始输入@的位置。删除的时候，@XXX要一块删除。 分析： 1.因为要在输入框中把@xxx高亮显示，所以需要用到可编辑元素。 <div contentEditable></div> 2.用到selection和range对象 开撸： <div className={styles.talkInput} id="talkInput
前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能
旅行中的伊蕾娜的博客
03-06 1637
前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能
web前端之中国传统节日
04-10
在“web前端之中国传统节日”这个项目中，我们聚焦于利用前端技术来展示和庆祝中国的传统节日。这个小组作业提供了一个很好的平台，让开发者能够学习并实践如何将文化元素融入到网页设计中，同时提升自己的前端技能...
web前端开发技术实验报告实验五.doc
11-13
表单是网页上用于输入信息的区域，它的重要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提醒信息和表单域构成。创建表单：<form></form>标记被用于创建一个表单，...
前端实现登录功能
10-27
适合小白使用的代码 前端实现登录功能前端实现登录功能前端实现登录功能
JavaScript聊天室@功能实现示例 vue-tribute-demo
06-23
1. **@之后触发的人员是从接口获取的动态数据** ； 2. **选中人员后如何获取选中人员的数据** ； 3. **删除人员后从已选数据中去掉删除人员的数据** ；
ACM赛事提醒与管理前端项目
02-19
项目可能使用这些技术来创建动态、响应式的比赛日程表，以及提醒功能。 2. **前端框架**: 为了提高开发效率和代码复用性，项目可能采用了某种前端框架，如React、Vue或Angular。这些框架能够简化组件化开发，使得...
Laravel admin实现消息提醒、播放音频功能
10-16
总结一下，实现Laravel Admin的消息提醒和播放音频功能主要涉及前端和后端两部分。前端通过定时Ajax请求与后端保持通信，检测新消息并播放音频通知；后端则提供一个接口，检查并处理新订单信息。在实际应用中，可能...
网上接html开发业务,业务开发情境之：实现一个@功能
weixin_39649614的博客
06-04 321
最近接到了一个业务需求，让用户能够通过网页聊天框的方式在线完成交易，一个用户可能有多个业务群，其中一个功能就是要@人，@这个功能在现实的应用中经常可以遇到，比如微博、QQ都有@功能，今天我们就以前端的方式谈谈怎么一步步实现一个@功能。@功能涉及到的原生APIobj.selectionStart获取光标位置obj.setSelectionRange(n, n)设置光标位置keyup事件和keydow...
JS实现在PC端@功能
lyj168997的博客
05-08 471
具体代码请到github下载 项目地址：https://github.com/lyj168997/atdemo.git
前端web实现（@、At、艾特）选人或引用数据
qq_42002487的博客
09-29 3063
在我们日常的网络社交中，@XXX功能可以说是一个比较常见的功能了。本文将结合实践，介绍一种可以快速实现@选人或引用数据的方式。
vue 输入框@人功能组件，支持复制粘贴
不会做饭的程序员的博客
05-07 1840
vue 输入框@人功能组件，支持复制粘贴，多端通用
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值