JS 怎么监听复制事件 并获取复制内容 并修改复制文本内容

需求背景:

需要禁用部分文本内容的复制事件,并且在复制事件发生时,将复制的文本内容通过接口传给后端。

上代码:

javascript 复制代码
    // 使用Dom获取需要操作禁用时间的元素
    let element: any = document.getElementById('test1');

    // 为该元素添加 copy 事件监听器
    element.addEventListener('copy', function (event: any) {
      // 在这里编写你想要执行的操作
      console.log('复制事件被触发');

      var selection: any = window.getSelection();
      var selectedText = selection.toString();
      console.log(selectedText, '打印查看复制的文本内容')
      // 将selectedText调用接口传给后端

      // 可以通过 event.clipboardData 对象来设置剪贴板的数据
      event.clipboardData.setData('text/plain', '自定义的复制文本(替换复制的文本内容)');

      // 阻止默认的复制行为
      event.preventDefault();
    });
相关推荐
高山上有一只小老虎44 分钟前
SpringBoot项目集成thymeleaf实现web
前端·spring boot·后端
求梦8201 小时前
前端八股文【CSS核心面试题库】
前端·css·面试
算法小菜鸟成长心得1 小时前
记录自己第一次将React 编写的前端部署到服务器,实现外网访问
服务器·前端·react.js
怒放的生命19912 小时前
pnpm + Monorepo 使用教程(集成 Vue 3 项目)
前端·vue.js·pnpm·monorepo·前端工程化
kkkAloha2 小时前
JS笔记汇总
开发语言·javascript·笔记
佛系打工仔7 小时前
绘制K线第二章:背景网格绘制
android·前端·架构
计算机毕设VX:Fegn08958 小时前
计算机毕业设计|基于springboot + vue医院设备管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
明天好,会的8 小时前
分形生成实验(五):人机协同破局--30万token揭示Actix-web状态管理的微妙边界
运维·服务器·前端
C_心欲无痕9 小时前
nginx - alias 和 root 的区别详解
运维·前端·nginx
北辰alk9 小时前
Vue 路由信息获取全攻略:8 种方法深度解析
vue.js