当前位置: 首页 > news >正文

前端输入框简单实现检测@成员输入

大体逻辑是

  1. 给input框添加一个input监听,并判断输入是否为@
  2. 获取当前光标的位置,你输入的@肯定在光标之前,且肯定是最后一个@
  3. input输入的内容换行可以被认为空格,需要进行全局替换
  4. 判断@成功的逻辑分为两部分,前方一般来说是为空或者@index的下标为0,后方的判断是到下一个间隔(空格)之间不能存在@,这个主要看产品需求,一般情况是这样
     //获取dom,并添加input监听this.$refs.input.addEventListener('input', (event) => {//判断if (event.data === '@') {//获取当前焦点位置const selectionStart = event.srcElement.selectionStart;//将输入值的换行替换成 空格const value = this.newComment.replace(/[\r\n]/g, ' ');//获取到当前焦点位置最后一个@const start = value.lastIndexOf('@', selectionStart);//获取从焦点位置后第一个空格的下标const fistSpaceIndexFromStart = value.indexOf(' ', selectionStart);//能够找到就用第一个空格的下标否则就找到最后const end = fistSpaceIndexFromStart > -1 ? fistSpaceIndexFromStart : value.length;//获取到@之后到下一个间隔之间的内容const termWithTrigger = value.substring(start, end);//前方的判断-不包含index为0的情况const startBeforeHasSpace = start > 0 && value[start - 1] === ' ';if ((startBeforeHasSpace || start === 0) &&!termWithTrigger.includes(' ') &&!termWithTrigger.includes('@', 1)) {//todo//@成功之后要做的事情}}});

相关文章:

前端输入框简单实现检测@成员输入

大体逻辑是 给input框添加一个input监听,并判断输入是否为获取当前光标的位置,你输入的肯定在光标之前,且肯定是最后一个input输入的内容换行可以被认为空格,需要进行全局替换判断成功的逻辑分为两部分,前方一般来说是…...

通过与chatGPT交流实现零样本事件抽取

1、写作动机: 近来的大规模语言模型(例如Chat GPT)在零样本设置下取得了很好的表现,这启发作者探索基于提示的方法来解决零样本IE任务。 2、主要贡献: 提出了基于chatgpt的多阶段的信息抽取方法:在第一阶…...

使用nodejs和html布局一个简单的视频播放网站,但是使用localhost:端口访问html无法加载视频

js代码: // app.js const express require(express); const path require(path); const app express();// 设置静态文件目录,这里假设你的视频文件在public/videos/目录下 app.use(express.static(path.join(__dirname, )));// 设置主页路由&#xf…...

【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

视频讲解 [AG32VF407]国产MCUFPGA Verilog双边沿检测输出方波 实验过程 本次使用使用AG32VF407开发板中的FPGA,使用双clk的双边沿进行检测,同步输出方波 同时可以根据输出的方波检测clk的频率,以及双clk的相位关系,如下为verilog…...

[晓理紫]每日论文分享(有中文摘要,源码或项目地址)--强化学习、模仿学习、机器人

专属领域论文订阅 关注{晓理紫},每日更新论文,如感兴趣,请转发给有需要的同学,谢谢支持 如果你感觉对你有所帮助,请关注我,每日准时为你推送最新论文。 为了答谢各位网友的支持,从今日起免费为3…...

为什么说TiDB在线扩容对业务几乎没有影响

作者: 数据源的TiDB学习之路 原文来源: https://tidb.net/blog/e82b2c5f 当前的数据库种类繁多,墨天轮当前统计的所有国产数据库已经有 290个 ,其中属于关系型数据库的有 166个 。关系型数据库从部署架构上又可以分为集中式…...

STM32--SPI通信协议(2)W25Q64简介

一、W25Q64简介 1、W25Qxx中的xx是不同的数字,表示了这个芯片不同的存储容量; 2、存储器分为易失性与非易失性,主要区别是存储的数据是否是掉电不丢失: 易失性存储器:SRAM、DRAM; 非易失性存储器&#xff…...

svn安装与搭建

1、svn搭建 # yum install subversion -y //安装 # svnserve --version //查看版本 2、创建仓库目录repo # mkdir -p /opt/svn/repo //创建目录 # svnadmin create /opt/svn/repo/ //创建新仓库 # ls !$ …...

什么是缓存击穿、缓存穿透、缓存雪崩?

缓存雪崩 缓存雪崩是指缓存同一时间大面积的失效,所以,后面的请求都会落到数据库上,造成数据库短时间内承受大量请求而崩掉。 解决方案 缓存数据的过期时间设置随机,防止同一时间大量数据过期现象发生。一般并发量不是特别多的时…...

springboot153相亲网站

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…...

CMake生成osg的FFMPEG插件及Windows下不生成VS工程问题解决

在Windows下,如何利用CMake生成osg的FFMPEG插件,请参考如下博文,同生成jpeg插件类似: osg第三方插件的编译方法(以jpeg插件来讲解)。 如下为生成FFMPEG时必要的设置: 注意: 一定要…...

代码随想录算法训练营Day25 | 216.组合总和III、17.电话号码的字母组合

216.组合总和III 与77.组合差不多&#xff0c;就返回条件中收集结果步骤多了一步判断&#xff0c;同时剪枝策略多了一种 vector<vector<int>> ans; vector<int> path; int sum 0;void backtracking(int num, int& k, int& n) {if (path.size() k…...

故障诊断 | 一文解决,SVM支持向量机的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | 一文解决,SVM支持向量机的故障诊断(Matlab) 支持向量机(Support Vector Machine,SVM)是一种常用的监督学习算法,用于分类和回归分析。SVM的主要目标是找到一个最优的超平面(或者在非线性情况下是一个最优的超曲面),将不同类别的样本分开…...

12.1 Web开发_DOMBOM:JS关联CSS(❤❤)

12.1 Web开发_DOM&BOM 1. DOM&BOM2. DOM:文档对象模型2.1 获取页面元素1. getElementById2. getElementsByClassName3. querySelector3. 事件3.1 事件三要素3.2 绑定事件的三种方式1. 标签on2. 对象.on事件3. addEventListener3.3 常用事件...

scoped样式隔离原理

在 Vue 中&#xff0c;作用域样式&#xff08;Scoped Styles&#xff09;是通过以下原理实现的&#xff1a; 1、唯一选择器&#xff1a; 当 Vue 编译单文件组件时&#xff0c;在样式中使用 scoped 特性或 module 特性时&#xff0c;Vue 会为每个样式选择器生成一个唯一的属性…...

降价不是杀手锏,和府捞面打起“养生牌”

餐饮&#xff0c;“走进来”易&#xff0c;“走上去”难。 作为一个低门槛的创业赛道&#xff0c;每年都有数以万计怀着掘金梦的创业者涌入餐饮业。但是&#xff0c;每年也有无数个理由让餐饮经营者黯然离场。根据辰智大数据预测&#xff0c;2023全年餐饮开店率35.5%&#xff…...

在WORD中设置公式居中编号右对齐设置方式

1 软件环境 Office Microsoft Office LTSC 专业增强版2021 2 最终效果 3 操作步骤 编辑公式&#xff1b;光标定位到公式的最后&#xff08;不是行的最后&#xff09;&#xff1b;输入#编号光标定位在公式最后&#xff08;不是行的最后&#xff09;&#xff0c;按Enter键回车…...

如何使用 Supabase Auth 在您的应用程序中设置身份验证

在本文中&#xff0c;您将学习基本的关键概念&#xff0c;这些概念将帮助您掌握身份验证和授权的工作原理。 您将首先了解什么是身份验证和授权&#xff0c;然后了解如何使用 Supabase auth 在应用程序中实现身份验证。 &#xff08;本文内容参考&#xff1a;java567.com&…...

带libc源码gdb动态调试(导入glibc库使得可执行文件动态调试时可看见调用库函数源码)

文章目录 参考部分查看源码是否编译时有-g调试信息和符号表在 gdb 中加载 debug 文件/符号表将 debug 文件放入 ".debug" 文件夹通过 gdb 命令 set debug-file-directory directories GCC的gcc和g区别指定gcc/g&#xff0c;glibc的版本进行编译指定gcc/g的版本指定gl…...

初级通信工程师-通信动力与环境

1、 动力与环境的组成和基本要求 ● 动力与环境的组成&#xff1a; 通信电源系统、机房空调系统、动力环境集中监控管理系统与能耗监测管理系统和接地系统与防雷系统。 ● 网络通信设备对动力与环境的基本要求&#xff1a; 网络通信设备对动力与环境最根本的要求&#xff0c;…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...