Vue监听浏览器自带的复制事件并对复制内容进行修改

news2024/10/5 17:51:36
场景:

在使用鼠标右键或者ctrl c的时候。光标会自动换行。粘贴出来的数据光标应该在红色部分,却出现在了黑色部分。

方法一: 

html标签不要换行;css去除空格;

white-space: nowrap;
 方法二:

使用函数对复制的内容进行修改。同理即可在复制文本后追加产权标签等等。

    mounted() {
        document.addEventListener('copy', function (e) {
            // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
            let clipboardData = e.clipboardData || window.clipboardData;
            // 如果 未复制或者未剪切,直接 return 
            if (!clipboardData) return;
            // Selection 对象 表示用户选择的文本范围或光标的当前位置。
            // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
            let text = window.getSelection().toString();
            if (text) {
                // 如果文本存在,首先取消默认行为
                e.preventDefault();
                // 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本 
                // format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
                // data 一个 DOMString 表示要添加到 drag object 的数据
                clipboardData.setData('text/plain', text.trim())
            }
        })
    },

   beforeDestroy() {
        document.removeEventListener('copy', function (e) {
            // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
            let clipboardData = e.clipboardData || window.clipboardData;
            // 如果 未复制或者未剪切,直接 return 
            if (!clipboardData) return;
            // Selection 对象 表示用户选择的文本范围或光标的当前位置。
            // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
            let text = window.getSelection().toString();
            if (text) {
                // 如果文本存在,首先取消默认行为
                e.preventDefault();
                // 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本 
                // format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
                // data 一个 DOMString 表示要添加到 drag object 的数据
                clipboardData.setData('text/plain', text.trim())  在这追加信息
            }
        })
    }

 

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

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

相关文章

【数据结构和算法】独一无二的出现次数

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 哈希类算法题注意事项 2.2 方法一:判断长度 2.3 方法二: set 判断 2.4 方法…

MCEWMDRMNDBootstrap.dll文件丢失,软件游戏无法启动,怎样下载修复

不少小伙伴反馈,在打开某些游戏或软件的时候,Windows会提示“MCEWMDRMNDBootstrap.dll文件丢失,软件无法启动”,不知道应该怎样办? 首先,我们先来了解“MCEWMDRMNDBootstrap.dll文件”是什么? …

Sensor Demosaic IP 手册PG286笔记

《 UG1449 Multimedia User Guide》中包含了大量的多媒体IP简介。 本IP 用于对bayer RGB(每个pixel只有单个R/G/B)做去马赛克处理,恢复成每个pixel点都有完整的RGB值。通过axi接口配置IP内部erg。 1、算法手册中的描述 提到了几种插值算法&…

友情提示!使用JDK11,如果 maven包含 <scope>test</scope>标签,构建时会出现严重错误

最近在做selenium的升级工作&#xff0c;使用jdk 11.0.20 maven 3.9.6&#xff0c;Pom 配置如下&#xff1a; maven构建报错 <dependencies> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selen…

电脑监控软件是无路径、无进程吗

后台有很多人问&#xff0c;电脑监控软件是无路径、无进程吗。 今天先来回答一下这个问题&#xff0c;电脑监控软件是无路径、无进程&#xff0c;不易被发现的。 一、避免被发现 电脑监控软件可以通过无路径、无进程的方式进行安装和运行&#xff0c;以避免被员工发现和删除…

Java AOP

1 概述 1.1 定义 AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff0c;即面向切面编程 。在不修改原有代码的基础上&#xff0c;对代码进行增强。 1.2 术语 1.3 底层原理 入门案例 项目名&#xff1a;day049_spring_aop 坐标&#xff1a;web、test、aop &…

浅谈安科瑞智能照明系统在马来西亚国家石油公司项目的应用

摘要&#xff1a;随着社会经济的发展及网络技术、通信技术的提高&#xff0c;人们对照明设计提出了新的要求&#xff0c;它不仅要控制照明光源的发光时间、 亮度&#xff0c;而且与其它系统来配合不同的应用场合做出相应的灯光场景。本文介绍了马亚西亚石油公司智能照明项目的应…

磁盘LVM逻辑卷和扩容

一、LVM介绍 1、LVM是Linux中对硬盘分区的一种管理机制。 2、工作原理&#xff1a; ①动态调整磁盘&#xff0c;提高磁盘管理的灵活性 ②/boot分区用于存放引导文件&#xff0c;不能基于LVM创建 ③图形界面管理工具 3、LVM机制的基本概念 ①物理卷&#xff1a;将硬盘转船…

2023年度五大容灾关键词

当前&#xff0c;云计算已成为推动企业数字化转型的关键技术之一。它已逐步渗透进入各个行业&#xff0c;如互联网、政务、金融和制造业&#xff0c;企业上云的比例和应用深度也大幅提升。与此同时&#xff0c;不可抗力因素带来的灾害风险仍然持续&#xff0c;战争、地震、海啸…

Weblogic反序列化远程命令执行(CVE-2019-2725)

漏洞描述&#xff1a; CVE-2019-2725是一个Oracle weblogic反序列化远程命令执行漏洞&#xff0c;这个漏洞依旧是根据weblogic的xmldecoder反序列化漏洞&#xff0c;通过针对Oracle官网历年来的补丁构造payload来绕过。 复现过程&#xff1a; 1.访问ip&#xff1a;port 2.可…

一文浅谈旋转变换:旋转矩阵、旋转向量、欧拉角、四元数

目录 一、旋转矩阵 1.1 定义和推导 1.2 旋转矩阵的缺点 二、旋转向量 2.1 定义和推导 2.1.1 旋转向量转旋转矩阵 2.1.2 旋转矩阵转旋转向量 2.2 旋转向量的缺陷 三、欧拉角 3.1 定义和推导 3.1.1 欧拉角与旋转矩阵 3.1.1.1 欧拉角转旋转矩阵 3.1.1.2 旋转矩阵转欧…

关于“Python”的核心知识点整理大全49

目录 16.2.10 加亮颜色主题 16.3 小结 第&#xff11;7 章 使用API 17.1 使用 Web API 17.1.1 Git 和 GitHub 17.1.2 使用 API 调用请求数据 17.1.3 安装 requests 17.1.4 处理 API 响应 python_repos.py 注意 17.1.5 处理响应字典 python_repos.py import json i…

Python 内置高阶函数练习(Leetcode500.键盘行)

Python 内置高阶函数练习&#xff08;Leetcode500.键盘行&#xff09; 【一】试题 &#xff08;1&#xff09;地址&#xff1a; 500. 键盘行 - 力扣&#xff08;LeetCode&#xff09; &#xff08;2&#xff09;题目 给你一个字符串数组 words &#xff0c;只返回可以使用在…

阿里云数据库polardb怎么收费?

阿里云数据库PolarDB租用价格表&#xff0c;云数据库PolarDB MySQL版2核4GB&#xff08;通用&#xff09;、2个节点、60 GB存储空间55元5天&#xff0c;云数据库 PolarDB 分布式版标准版2核16G&#xff08;通用&#xff09;57.6元3天&#xff0c;阿里云百科aliyunbaike.com分享…

AI数字员工的出现:不是取代,而是让技术更好地服务于人类_光点科技

在人工智能技术迅猛发展的今天&#xff0c;AI数字员工的出现成为了企业和组织关注的热点。与传统观念中的机器人或自动化设备不同&#xff0c;AI数字员工是集成了最新AI技术&#xff0c;如自然语言处理、机器学习和情感分析等功能的虚拟助手&#xff0c;它们能够完成复杂的工作…

.Net FrameWork总结

.Net FrameWork总结 介绍.Net公共语言运行库CLI的组成.NET Framework的主要组成.NET Framework的优点CLR在运行期管理程序的执行&#xff0c;包括以下内容CLR提供的服务FCL的组成 或 服务&#xff08;这个其实就是我们编码时常用到的类库&#xff09;&#xff1a;&#xff08;下…

ERROR: No matching distribution found for torch==2.0.1解决方案

大家好&#xff0c;我是水滴~~ 本文主要介绍在安装 stable-diffusion-webui 时出现的 ERROR: No matching distribution found for torch2.0.1 问题的解决方案&#xff0c;希望能对你有所帮助。 《Python入门核心技术》专栏总目录・点这里 文章目录 问题描述解决方案离线安装 …

WeakMap 和 Map 的区别,WeakMap 原理,为什么能被 GC?

垃圾回收机制 我们知道&#xff0c;程序运行中会有一些垃圾数据不再使用&#xff0c;需要及时释放出去&#xff0c;如果我们没有及时释放&#xff0c;这就是内存泄露 JS 中的垃圾数据都是由垃圾回收&#xff08;Garbage Collection&#xff0c;缩写为 GC&#xff09;器自动回…

MyBatis的基本使用及常见问题

MyBatis 前言MyBatis简介MyBatis快速上手Mapper代理开发增删改查环境准备配置文件完成增删改查查询添加修改删除 参数传递注解完成增删改查 前言 JavaWeb JavaWeb是用Java技术来解决相关Web互联网领域的技术栈。 MySQL数据库与SQL语言 MySQL&#xff1a;开源的中小型数据库。…

【银行测试】金融银行-理财项目面试/分析总结(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行理财相关的项…