【element ui】input输入控件绑定粘贴事件,从 Excel 复制的数据粘贴到输入框(el-input)时自动转换为逗号分隔的数据

目录

  • 1、需求
  • 2、实现思路:
  • 3、控件绑定粘贴事件
      • 事件修饰符说明:
  • 4、代码实现
  • 🚀写在最后

1、需求

在 Vue 2 和 Element UI 中,要实现从 Excel 复制空格分隔的数据,并在粘贴到输入框(el-input)时自动转换为逗号分隔的数据

2、实现思路:

  1. <el-input/ >组件是由外层< div >和内层的< input>组成的,
    根据浏览器的事件传递机制(先捕获,后冒泡):粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input,
    因此可以在组件上捕获监听paste事件,
  2. 在 paste 事件处理函数中,获取剪贴板中的文本数据,
  3. 将空格分隔的数据转换为逗号分隔的数据,
  4. 将转换后的数据赋值给 v-model 绑定的变量。

在这里插入图片描述

3、控件绑定粘贴事件

  <el-inputv-model="storesName"clearablestyle="margin-left: 6px;width: 40rem"placeholder="请输入编码或名称,多项输入以英文,号间隔"class="details-input"@paste.native="handlePaste"/>

事件修饰符说明:

native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了

4、代码实现

    handlePaste(e) {// 阻止默认粘贴行为(可选,取决于你是否需要立即显示原始数据)e.preventDefault()// 获取剪贴板中的文本数据const text = (e.originalEvent || e).clipboardData.getData('text/plain').trim()console.log(text, '文本粘贴')// 将空格分隔的数据转换为逗号分隔的数据const replacedText = text.replace(/\s+/g, ',')// 将转换后的数据赋值给 inputValuethis.storesName = replacedText},

handlePaste 方法会阻止默认的粘贴行为,然后获取粘贴板上的文本。接着,使用 String.prototype.replace 方法和一个正则表达式 \s+ 来匹配一个或多个空格字符,并将它们替换为英文逗号。最后,将处理后的文本赋值给 inputValue。

/\s+/g 是一个正则表达式,用于匹配一个或多个空白字符(包括空格、制表符、换行符等)。这个正则表达式使用了两个特殊的字符:

\s:匹配任何空白字符。

+:表示匹配一个或多个前面的字符(在这里是 \s)。

g:表示全局搜索,即替换所有匹配的项,而不仅仅是第一个。

在代码中,text.replace(/\s+/g, ‘,’) 的作用是将字符串 text 中所有连续的空白字符替换为一个英文逗号 ,。

参考文章:
elementui输入控件绑定粘贴事件对复制数据做处理
阻止element组件中的的粘贴功能
vue element-ui 后台中实现点击按钮,将文本内容复制到剪贴板

🚀写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐系统三十六式学习笔记:工程篇.常见架构24|典型的信息流架构是什么样的

目录 整体框架数据模型1.内容即Activity2.关系即连接 动态发布信息流排序数据管道总结 从今天起&#xff0c;我们不再单独介绍推荐算法的原理&#xff0c;而是开始进入一个新的模块-工程篇。 在工程实践的部分中&#xff0c;我首先介绍的内容是当今最热门的信息流架构。 信息…

ElasticSearch(四)— 数据检索与查询

一、基本查询语法 所有的 REST 搜索请求使用_search 接口&#xff0c;既可以是 GET 请求&#xff0c;也可以是 POST请求&#xff0c;也可以通过在搜索 URL 中指定索引来限制范围。 _search 接口有两种请求方法&#xff0c;一种是基于 URI 的请求方式&#xff0c;另一种是基于…

C#初级——基础语法

前言 学习Unity游戏编程开发会使用到两种语言&#xff0c;一种是C#&#xff0c;另一种是Javascript。有学习C语言基础和想学unity游戏开发的萌新一般都推荐学习C#基础编程&#xff0c;以此来快速上手unity的学习。 本次学习使用到的工具为&#xff1a;VS2022 环境安装 首先&a…

IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

目录 1. 安装Node.js2. 安装vue-cli构建工具3. 使用vue-cli创建项目4. 启动项目5. IDEA启动vue6. 在IDEA编译vue项目7. 用yarn启动vue项目8. npm和yarn命令行命令简单使用8.1 npm8.2 yarn 1. 安装Node.js Node.js基于Google的V8引擎&#xff0c;形成了一个Javascript的运行环境…

CFPRF:一种用于音频时间伪造检测和定位的框架

关键词&#xff1a;音频伪造检测、时间伪造定位、差异特征感知学习 最近&#xff0c;一种新型的音频部分伪造形式对音频取证提出了挑战&#xff0c;这要求采取先进的对策来检测长时间音频中的微妙伪造操作。然而&#xff0c;现有的对策仍然服务于分类目的&#xff0c;未能对部分…

手机空号过滤批量查询的意义及方法

手机空号过滤批量查询是现代营销和通信管理中常用的技术手段&#xff0c;旨在通过批量处理手机号码&#xff0c;筛选出活跃号码和空号等无效号码&#xff0c;以提高营销效率和减少不必要的通信成本。以下是关于手机空号过滤批量查询的详细解答&#xff1a; 一、手机空号过滤批…

C++客户端Qt开发——Qt窗口(工具栏)

2.工具栏 使用QToolBar表示工具栏对象&#xff0c;一个窗口可以有多个工具栏&#xff0c;也可以没有&#xff0c;工具栏往往也可以手动移动位置 ①设置工具栏 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<…

61.列表重绘

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;60.分析对比模块找出被注入的模块 以 60.分析对比模块找出被注入的模块 它的代码为基础…

secureCRT同时在所有已打开窗口执行命令、mac-os下使用的SecureCRT版本 以及 SecureCRT一段时间不操作没有响应的问题

一、secureCRT命令行工具一次性同时在所有已打开窗口执行命令 公司的服务器比较多&#xff0c;最近因为opcache&#xff0c;上线发布后&#xff0c;需要重启所有的WEB服务器上的php。目前使用的jenkins发布&#xff0c;不过账号安全问题&#xff0c;给jenkins的账号权限受限不能…

Hype 4 Pro for Mac:专业级HTML5动画制作利器

Hype 4 Pro for Mac是一款专为Mac用户设计的专业级HTML5动画制作软件&#xff0c;它集动画制作、交互设计于一身&#xff0c;为用户提供了一种全新的、高效的动画制作体验。 该软件拥有直观易用的界面和强大的功能&#xff0c;支持多种设计元素&#xff0c;如滚动、旋转、缩放…

DVWA的安装和使用

背景介绍 DVWA是Damn Vulnerable Web Application的缩写&#xff0c;是一个用于安全脆弱性检测的开源Web应用。它旨在为安全专业人员提供一个合法的测试环境&#xff0c;帮助他们测试自己的专业技能和工具&#xff0c;同时也帮助web开发者更好地理解web应用安全防范的过程。DV…

GD32 MCU电源复位和系统复位有什么区别

GD32 MCU的复位分为电源复位和系统复位&#xff0c;电源复位又称为冷复位&#xff0c;相较于系统复位&#xff0c;上电复位更彻底&#xff0c;下面为大家详细介绍上电复位和系统复位的实现以及区别。 电源复位包括上电/掉电复位或者从standby模式唤醒产生的复位&#xff0c;电…

【进阶篇-Day12:JAVA中stream流、File类的介绍】

目录 1、stream流1.1 stream流的作用1.2 stream流的思想1.3 获取stream流对象1.4 stream流中间操作方法1.5 stream流终结操作方法1.6 stream收集操作1.7 stream的综合案例 2、File类2.1 File类创建文件对象2.2 File类的常用方法2.3 File类的创建和删除方法2.4 File类的遍历方法…

埃文科技受邀出席2024年河南省工业领域网络和数据安全政策宣贯会

2024年7月18日&#xff0c;由河南省工业和信息化厅主办&#xff0c;河南省工业信息安全产业发展联盟、河南省信息安全产业协会承办的2024年河南省工业领域网络和数据安全政策宣贯会在郑州召开&#xff0c;活动旨在提升河南省工业领域网络和数据安全保护能力&#xff0c;助力企业…

Fetch请求的取消

在实际开发中&#xff0c;我们常常会遇到根据输入框输入的内容&#xff0c;实时去请求接口并将拿到的数据渲染到页面上&#xff0c;但是由于接口响应时间不可控&#xff0c;简单来说就是请求的顺序和响应的顺序不一致&#xff0c;就会导致你可能输入了12&#xff0c;但实际返回…

PMOS、NMOS 驱动电路和使用方法

下图就是 PMOS 和 NMOS 的简单使用方法。D2 是指示灯&#xff0c;NMOS 的 G 连接单片机 IO&#xff0c;PMOS 的 D 连接 24V 继电器&#xff0c;PMOS 的体二极管作为继电器的反向电动势的吸收二极管 PMOS 和 NMOS 不一样&#xff0c;在远超单片机电压下控制 PMOS 必须依靠一个 N…

CSS相关记录

文章目录 backgroundposition文字displayflexjustify-contentalign-itemsflex-directionflex-wrap gridimportant transformtranslate&#xff08;位移&#xff09;scale&#xff08;缩放&#xff09;rotate&#xff08;旋转&#xff09;origin (旋转中心点)skew (倾斜 ) borde…

C# 知识点总结

入门 C#程序在.NET上运行&#xff0c;.NET framework包含两个部分&#xff1a; ①&#xff1a;.NET framework类库 ②&#xff1a;公共语言运行库CLR&#xff08;.NET虚拟机&#xff09; CLS&#xff08;公共语言规范&#xff09; CTS&#xff08;通用类型系统&#xff09; .N…

【分布式系统】 单机架构 | 分布式架构 | 集群 | 主从架构 | 分库分表 | 冷热分离 | 微服务

文章目录 [toc] 分布式系统一、单机架构二、分布式系统三、应用服务器集群四、读写分离 / 主从分离架构五、引入缓存/冷热分离架构六、垂直分库七、微服务架构——业务拆分代价优势 八、名词解释1.应用&#xff08;Application&#xff09;/系统(System)2.模块&#xff08;Mode…

Mysql9安装

目录 一、下载mysql 二、安装 三、配置mysql环境变量 四、mysql初始化和启动 1.以管理员身份运行cmd 2.cd到mysql的安装目录 3.初始化mysql的数据库 4.为Windows系统安装MySQL服务 5.查看一下名为mysql的服务&#xff1a; 6.启动MySQL服务 五、附录 1.系统变量还在&…