前端输入框简单实现检测@成员输入
大体逻辑是
- 给input框添加一个input监听,并判断输入是否为@
- 获取当前光标的位置,你输入的@肯定在光标之前,且肯定是最后一个@
- input输入的内容换行可以被认为空格,需要进行全局替换
- 判断@成功的逻辑分为两部分,前方一般来说是为空或者@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, )));// 设置主页路由…...
【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; 非易失性存储器ÿ…...
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.组合差不多,就返回条件中收集结果步骤多了一步判断,同时剪枝策略多了一种 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 中,作用域样式(Scoped Styles)是通过以下原理实现的: 1、唯一选择器: 当 Vue 编译单文件组件时,在样式中使用 scoped 特性或 module 特性时,Vue 会为每个样式选择器生成一个唯一的属性…...
降价不是杀手锏,和府捞面打起“养生牌”
餐饮,“走进来”易,“走上去”难。 作为一个低门槛的创业赛道,每年都有数以万计怀着掘金梦的创业者涌入餐饮业。但是,每年也有无数个理由让餐饮经营者黯然离场。根据辰智大数据预测,2023全年餐饮开店率35.5%ÿ…...
在WORD中设置公式居中编号右对齐设置方式
1 软件环境 Office Microsoft Office LTSC 专业增强版2021 2 最终效果 3 操作步骤 编辑公式;光标定位到公式的最后(不是行的最后);输入#编号光标定位在公式最后(不是行的最后),按Enter键回车…...
如何使用 Supabase Auth 在您的应用程序中设置身份验证
在本文中,您将学习基本的关键概念,这些概念将帮助您掌握身份验证和授权的工作原理。 您将首先了解什么是身份验证和授权,然后了解如何使用 Supabase auth 在应用程序中实现身份验证。 (本文内容参考:java567.com&…...
带libc源码gdb动态调试(导入glibc库使得可执行文件动态调试时可看见调用库函数源码)
文章目录 参考部分查看源码是否编译时有-g调试信息和符号表在 gdb 中加载 debug 文件/符号表将 debug 文件放入 ".debug" 文件夹通过 gdb 命令 set debug-file-directory directories GCC的gcc和g区别指定gcc/g,glibc的版本进行编译指定gcc/g的版本指定gl…...
初级通信工程师-通信动力与环境
1、 动力与环境的组成和基本要求 ● 动力与环境的组成: 通信电源系统、机房空调系统、动力环境集中监控管理系统与能耗监测管理系统和接地系统与防雷系统。 ● 网络通信设备对动力与环境的基本要求: 网络通信设备对动力与环境最根本的要求,…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
