全栈的自我修养 ———— js中的复制api

通常用于可以禁止用户复制或者在复制的内容后面添加版权信息等

  • 一、代码
  • 二、展示
    • 1、访问粘贴板的内容
    • 2、替换复制内容
    • 3、在复制内容的后面添加版权信息
    • 4、监听粘贴事件

一、代码

<body><div class="demo">不可以被复制</div><div class="dema">可以被复制</div><div class="autoAdd">复制后会自动加上版权信息</div><textarea style="height: 20vh;width: 30vw;"></textarea><div contenteditable></div><script>const res = document.querySelector('.demo')const autoAdd = document.querySelector('.autoAdd')// 将复制的内容替换res.addEventListener('copy', e=>{e.preventDefault()navigator.clipboard.writeText('不允许复制,交钱!')console.log(navigator.clipboard.readText());})// 添加额外内容autoAdd.addEventListener('copy', e=> {navigator.clipboard.writeText(autoAdd.innerHTML + ' + 版权信息')console.log(navigator.clipboard.readText());})// 查看粘贴板的内容的提示navigator.clipboard.readText().then((text) => {console.log(text);})// 还可以监听粘贴事件document.addEventListener('paste', (e)=>{console.log(e);})</script>
</body>

二、展示

1、访问粘贴板的内容

可以用于超链接携带自己的参数访问
在这里插入图片描述

在这里插入图片描述

2、替换复制内容

在这里插入图片描述

3、在复制内容的后面添加版权信息

在这里插入图片描述

4、监听粘贴事件

在这里插入图片描述

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

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

相关文章

ARM/Linux嵌入式面经(六):华为【共四面】

【一面】资格面 主要是问了有以下几点: 简历好奇我的专业,然后问我学过哪些学科。 项目当时抓我的项目,一个无线传感器网络的项目。没有问技术,主要问了: + 做了多久 + 在项目中处于什么角色,负责哪部分的工作。 + 遇到了什么困难?规划问了职业规划 家庭家庭成员,哪里…

如何从任何文档生成指令数据集以进行LLM微调

使用轻量级库经济地生成高质量的合成数据集 大型语言模型 &#xff08;LLMs&#xff09; 是功能强大的通用工具&#xff0c;但它们通常缺乏特定于领域的知识&#xff0c;这些知识通常存储在企业存储库中。 使用您自己的数据微调自定义LLM可以弥合这一差距&#xff0c;而数据准…

【Shiro反序列化漏洞】Shiro-550反序列化漏洞复现

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

了解下索引的几棵树?

二叉树 二叉搜索树最好的情况性能是O(logn)&#xff0c;最坏情况是O(n) 红黑树 它的时间复杂度是O(logn)&#xff0c;但是在数据量特别大的时候&#xff0c;树会特别高&#xff0c;就会遍历很多层级&#xff0c;对性能影响较大 BTree B树是一种多叉路衡查找树&#xff0c;相对于…

配置 conda为国内源

配置 Conda 使用非SSL源涉及到修改 Conda 的配置文件 .condarc。这个文件通常位于您的用户目录下&#xff0c;但如果它不存在&#xff0c;您可以手动创建一个。下面是具体操作步骤&#xff1a; 1. 找到或创建 .condarc 文件 Linux 和 macOS&#xff1a;打开终端。Windows&…

解决NVM安装Node失败:淘宝NPM镜像HTTPS证书到期及源切换指南

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

如果利用AOP/Aspect来修改方法的入参

问题描述&#xff1a; 最近项目代码过三方测试&#xff08;国企项目&#xff09;&#xff0c;在一系列代码扫描审计检查下&#xff0c;代码发现一部分修改&#xff0c;例如请求参数发生了编码/加密&#xff0c;导致后台需要对请求的参数进行解码/解密&#xff0c;后端那么接口&…

访问者模式(Visitor Pattern)

访问者模式 说明 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型模式&#xff0c;表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 该模式是将数据结构与数据操作分离的设计模式&#xff0c;是…

Flutter 多语言、主题切换之GetX库

多语言、主题切换之GetX库 前言正文一、配置项目二、模拟UI三、语言配置① 常量键② 语言配置文件③ 配置 四、持久化五、切换语言① my_home.dart② home.dart③ mine_controller.dart④ language_setting_controller.dart⑤ language_setting.dart⑥ mine.dart 六、切换主题①…

基于SpringBoot的“家政服务管理平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“家政服务管理平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页界面图 用户注册界面图 服务信息界面…

DM_SQL

DM_SQL 语言符合结构化查询语言 SQL 标准&#xff0c;是标准 SQL 的扩充。它集数据定义、数据查询、数据操纵和数据控制于一体&#xff0c;是一种统一的、综合的关系数据库语言。它功能强大&#xff0c;使用简单方便、容易为用户掌握。DM_SQL 语言具有如下特点&#xff1a; 1.…

WorldGPT、Pix2Pix-OnTheFly、StyleDyRF、ManiGaussian、Face SR

本文首发于公众号&#xff1a;机器感知 WorldGPT、Pix2Pix-OnTheFly、StyleDyRF、ManiGaussian、Face SR HandGCAT: Occlusion-Robust 3D Hand Mesh Reconstruction from Monocular Images We propose a robust and accurate method for reconstructing 3D hand mesh from m…

HDOJ 2045

不容易系列之(3)—— LELE的RPG难题 Problem Description 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉&#xff0c;这可急坏了众多“Cole”&#xff08;LELE的粉丝,即"可乐"&#xff09;,经过多方打探&#xff0c;某资深Cole终于知道了原因&#xff0c;原来…

ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。

发生的错误信息&#xff1a; File "C:\Users\malongqiang\.conda\envs\ObjectDetection\lib\ssl.py", line 1309, in do_handshakeself._sslobj.do_handshake() ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。 分析原因&#xff1a; …

接口的回调

接口是引用型变量 接口回调技术&#xff1a;把实现该接口的类的实例引用赋给接口变 量&#xff08;存放对象的引用&#xff09;→接口变量可调用被类重写的接口方法。 ★注意★&#xff1a;接口com无法调用类中非接口方法

SQL语句在MySQL中的执行过程

有一条SQL语句&#xff0c;给到MySQL,是怎么被执行的 基本架构 连接器&#xff1a;进行身份认证&#xff0c;确定操作权限 查询缓存&#xff1a; 执行查询语句时&#xff0c;先查询缓存&#xff08;不太实用&#xff0c;MySQL 8.0 版本后删了&#xff09; 分析器&#xff1a…

格子表单GRID-FORM | 必填项检验 BUG 修复实录

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互文档网站搭建&#xff08;VitePress&#xff09;与部署&#xff08;Github Pages&#xff09;必填项检验 BUG…

牛客小白月赛61-E-排队

很好的一道题啊,学到了不少东西!!!! 首先是一个结论 逆序对总数 n! / 2 * 不相等的数字对数 (1) 不相等的数字对数怎么求 结论 不相等的数字对数 C(n,2) - ∑C(2,cnt(i))(i数字的出现次数) (2) n! / 2 怎么处理,有取模的除运算怎么处理??? 这块一直不会,今…

20240314 大模型快讯

//社区生态// 零一万物发布Yi大模型API开放平台。零一万物通过开放 API 让包括开发者在内的更多人用上强大的对话、多模态大模型&#xff0c;用来创作或用于工作。 //智能体// 全球首个OpenAI机器人诞生。初创公司Figure联合OpenAI&#xff0c;推出名为Figure 01的机器人&…

搭建谷歌Gemini

前言 Gemini是Google AI于2023年发布的大型语言模型&#xff0c;拥有强大的文本生成、理解和转换能力。它基于Transformer模型架构&#xff0c;并使用了大量文本和代码数据进行训练。Gemini可以执行多种任务&#xff0c;包括&#xff1a; 生成文本&#xff1a;可以生成各种类…