【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…

cmake中的正则表达式

以下字符或者字符组合在cmake的正则表达式中的特殊含义&#xff1a; ^ 匹配输入的开始 $ 匹配输入的结束 . 匹配任意一个字符 \<char> 匹配一个字符&#xff0c;如.匹配字符.&#xff0c;\匹配字符\&#xff0c;\a匹配字符a [ ] 匹配在括号里面的任意字符&#xff0…

react组件通信方式

1. 父组件向子组件通信 // ParentComponent.js import React from react; import ChildComponent from ./ChildComponent;function ParentComponent() {const message Hello from parent!;return (<div><ChildComponent message{message} /></div>); }expo…

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;未能对部分…

“微软蓝屏”事件暴露了网络安全哪些问题

一、“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f; 1.软件漏洞&#xff1a;微软蓝屏事件是由于Windows操作系统中的一个软件漏洞导致的。软件漏洞可能被黑客利用来执行恶意代码或控制受感染的系统。 2.不及时的安全更新&#xff1a;微软蓝屏事件揭示了一些系统没有及时应…

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

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

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

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

Django教程(000):初识Django

Django 是一个高级 Python Web 框架,旨在快速开发、简洁、实用。Django 提供了众多内置功能,使得开发者可以专注于编写应用程序的业务逻辑,而不需要过多关注底层细节。以下是 Django 的详细介绍: 1. Django 简介 Django 是一个开放源代码的 Web 框架,由 Python 编写,最…

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…

css:卡片列表如何自适应布局

css媒体查询&#xff1a;media width(%)flex布局ant-design组件库中有个RowCol&#xff0c;但是有时候需要一排放5个&#xff0c;此时RowCol就不是很适用此时可以采用ant-design组件库Grid组件中useBreakpoint&#xff0c;搭配width(%),代码如下&#xff1a; const screens …

华为高教校园网络解决方案 方案规划

方案规划 高教校园虚拟化网络主要是基于iMaster NCE-Campus部署&#xff0c;按照iMaster NCE-Campus的业务配置模型进行部署规划&#xff0c;具体规划如表4-1所示。 表4-1 园区虚拟化网络新建方案规划 规划项 详细部署思路 管理网络部署方案 高教校园网络的管理…

Oriented RepPoints for Aerial Object Detection

研究对象&#xff1a; 空中目标识别&#xff0c;空中目标探测和识别技术的深入研究是为了将空中打击目标从复杂的背景环境中尽可能地剥离出来&#xff0c;通过知识学习&#xff0c;实现对目标的类型确认&#xff0c;进而完成对目标的威胁评估&#xff0c;为快速打击提供判定和决…

c++中的递归拷贝(Recursive Copy)和递归反转链表(Recursive Reverse Linked List)

前言 hello大家好啊&#xff0c;这里是文宇&#xff0c;不是文字&#xff0c;是文宇哦。 递归拷贝&#xff08;Recursive Copy&#xff09; C中的递归拷贝是一种在拷贝对象时使用递归方法的技术。在C中&#xff0c;为了拷贝一个对象&#xff0c;通常使用拷贝构造函数或拷贝赋…

vue大屏展示组件库datav

主要用于构建大屏数据展示页面&#xff0c;具有多种类型组件可供使用。详情参考 datav官网 一、安装 npm 安装 npm install jiaminghi/data-viewyarn安装 yarn add jiaminghi/data-view二、使用 在main.js中注册为全局组件 import dataV from jiaminghi/data-view Vue.us…