当前位置: 首页 > news >正文

Javascript自定义页面复制事件

Javascript自定义页面复制事件 – WhiteNight's Site

2023年10月13日

文章访问量:90

标签:Javascript

监听copy事件以达到自定义页面复制功能的效果。

写者注

需要注意的是,浏览器的部分拓展插件(如迅雷)会导致本文的代码报错。不过该报错不影响功能,而且只有在f12开发者控制台才能看见。不过如果觉得看着报错不顺眼的话,关闭导致你报错的拓展即可(自己一个一个试)。

什么是copy事件

用户的复制事件

当用户尝试在页面上复制某些内容时,就会触发copy事件。而通过监听copy事件,我们就可以自定义用户在页面上的复制的内容。比如当用户尝试复制时,出现弹窗或跳转页面(如百度文库);又或者是在用户复制的内容后加上copyright内容(如csdn)。

示例:禁止用户复制,并添加弹窗或跳转页面

代码和效果示例

先放一个能自由输入和复制的文本框在这里,方便调试。

测试文本:

先来实现禁止用户复制的逻辑。这里先放例子。可以试着复制下列文本,再粘贴到上方的文本框中,看看能不能复制成功。

->    你不能复制该内容    <-

->    你可以复制该内容    <-

写者注

样式实在不想改,琢磨css样式的话一琢磨就是一整天。还是先把文章完成再说。

上面这段代码实现了对<p>段落标签的监听,当用户尝试复制该内容时,阻止默认的复制事件,并实现你自定义的事件。这里自定义的是修改用户剪贴板的内容,并在浏览器中显示一个警告的弹窗。以下是代码(除去了css)

<div class="copypanel"><p id="content">-&gt;&nbsp;&nbsp;&nbsp;&nbsp;你不能复制该内容&nbsp;&nbsp;&nbsp;&nbsp;&lt;-</p><p id="content2">-&gt;&nbsp;&nbsp;&nbsp;&nbsp;你可以复制该内容&nbsp;&nbsp;&nbsp;&nbsp;&lt;-</p>
</div><script>content.addEventListener('copy',(e)=>{e.preventDefault();e.clipboardData.setData('text/plain','复制失败!');alert("不准复制!!!")})
</script>

那跳转页面也不难实现,直接给实现效果和代码吧。现在当你尝试复制相关内容时,会自动打开我的网站首页。

->    你不能复制该内容    <-

->    你可以复制该内容    <-

<div class="copypanel2"><p id="content3">->&nbsp;&nbsp;&nbsp;&nbsp;你不能复制该内容&nbsp;&nbsp;&nbsp;&nbsp;<-</p><p id="content4">->&nbsp;&nbsp;&nbsp;&nbsp;你可以复制该内容&nbsp;&nbsp;&nbsp;&nbsp;<-</p>
</div><script>content3.addEventListener('copy',(e)=>{e.preventDefault();window.open("https://white-night.club"); })
</script>

写者注

由于wordpress中自定义html区块就是直接把相关代码直接插入进当前html的一个div容器中,所以如果不指定要监听的元素,会导致当前页面的所有内容都无法访问。想监听当前页面所有dom的话把content换成document.addEventListener即可。

相关文章:

Javascript自定义页面复制事件

Javascript自定义页面复制事件 – WhiteNights Site 2023年10月13日 文章访问量&#xff1a;90 标签&#xff1a;Javascript 监听copy事件以达到自定义页面复制功能的效果。 写者注 需要注意的是&#xff0c;浏览器的部分拓展插件&#xff08;如迅雷&#xff09;会导致本文…...

Nginx:反向代理(示意图+配置)

示意图&#xff1a; 反向代理 反向代理&#xff08;Reverse Proxy&#xff09;是代理服务器的一种&#xff0c;它代表服务器接收客户端的请求&#xff0c;并将这些请求转发到适当的服务器。当请求在后端服务器完成之后&#xff0c;反向代理搜集请求的响应并将其传输给客户端。…...

macbook笔记本电脑内存怎么清理才能干净流畅?

假如你还在为“你的系统内存不足”的提示所困扰&#xff0c;或者你的Mac电脑突然运行缓慢和卡顿&#xff0c;那么你一般需要认真了解一下macbook内存怎么清理了? MacBook是功能强大的电脑&#xff0c;这点毫无疑问&#xff0c;但是它仍旧会随着时间推移变得运行缓慢。值得庆幸…...

spark 与 mapreduce 对比

Spark 为什么比 MapReduce 快总结 首先澄清几个误区&#xff1a; 1&#xff09;两者都是基于内存计算的&#xff0c;任何计算框架都肯定是基于内存的&#xff0c;所以说网上所说的 Spark 是基于内存计算所以快&#xff0c;显然是错误的。 2&#xff09;DAG 计算模型减少的是磁…...

kafka 相关概念

1 kafka 生产者 kafka 用push的方式把消息推送到topic 每个topic下可以有多个分区&#xff0c; 可以用hash 也可以用轮询的方式指定分区 每个分区内部是可以保证顺序的&#xff0c;但是整体无法保证顺序&#xff0c;除非设置成一个topic只有一个分区。 kafka这种多分区的设置 带…...

Ubuntu下vscode配置OpenCV以及Libtorch

opencv安装 sudo apt-get updatesudo apt-get install libopencv-dev 该方式安装的版本可能比较旧。 测试代码 #include <opencv2/opencv.hpp>#include <iostream>int main() {cv::Mat image cv::imread("t.png");cv::imshow("Image", ima…...

关于共识算法Raft的常见误解

关于共识算法Raft的常见误解 Raft 共识算法最终一致性与线性一致性日志的覆盖与删除Remove节点时需要skip 总结参考文档 Raft 共识算法 最近翻了翻Raft相关的资料&#xff0c;同时也总结了日常工作的一些积累&#xff0c;就当做Raft技术笔记吧。 由于工作的关系&#xff0c;Ra…...

Python学习基础笔记七十——模块和库1

模块和库&#xff1a; 一个python代码文件就实现了功能。功能比较单一。 在企业中&#xff0c;项目开发的文件&#xff0c;可能有成百上千个。 不同的代码文件&#xff0c;实现了不同的功能模块&#xff0c;就像一块块积木一样。这些功能文件整合起来&#xff0c;实现一个完…...

SystemVerilog Assertions应用指南 第一章(1.28章节 内建的系统函数)

SVA提供了几个内建的函数来检查一些最常用的设计条件。 $onehot(expression)—检验表达式满足“one-hot”,换句话说,就是在任意给定的时钟沿,表达式只有一位为高。 $onehot0( expression)—检验表达式满足“ zero one-hot”&#xff0c;换句话说,就是在任意给定…...

正则表达式(自用)

正则表达式 符号概述 分类符号用法示例元字符^以 ***开头$以 ***结尾d匹配数字s匹配任意的空白符.匹配除换行符以外的任意字符w匹配字母或数字或下划线或汉字\转义重复限定符*次数&#xff0c;至少一次至少1次?0次 或者 1次{n}{n,}{n,m}重复n次&#xff1b;n活更多次&#x…...

大厂真题:【模拟】OPPO2023秋招提前批-小欧数组求和

题目描述与示例 题目描述 小欧拿到了一个数组&#xff0c;她有q次操作&#xff0c;每次操作修改一个元素。小欧希望每次修改后得到当前数组所有元素之和。你能帮帮她吗&#xff1f; 输入描述 第一行输入两个正整数n和q&#xff0c;代表数组的大小和操作次数。 第二行输入n…...

Python括号匹配问题

给定一个只包含小写字母的字符串&#xff0c;判断该字符串中的括号是否闭合&#xff0c;如果每个左括号都有对应的右括号&#xff0c;并且括号的嵌套顺序正确&#xff0c;那么括号就能正确闭合。 否则&#xff0c;括号不能正确闭合&#xff0c;字符串中括号仅限于 "("…...

微信小程序备案内容常见问题汇总

一、备案时间点 自2023年09月01日起,新的微信小程序,必须备案后才能上架; 在2024年03月31日前,所有小程序都必须完成备案; 于2024年04月01日起,对未备案小程序进行清退处理。 微信小程序备案系统已于9月4日上线。 二、备案流程 [找备案入口]–[填主体信息]–[填小程…...

无人机新手防炸飞行技巧

不要在室内飞行,容易撞墙。起飞前设置好避障和返航模式。使用模拟器熟练掌握操控。选择开阔环境目视起飞。使用低速档平稳飞行。合理使用避障功能,不要盲目依赖。使用九宫格避障法。留意电量,及时返航。极低电量时放弃强行返航。飞行后及时为电池充电保养。...

webrtc opus 音频编码支持SILK和CELT模式

SILK CELT是指将SILK编解码器和CELT编解码器结合在一起的混合音频编码方案。 SILK&#xff08;Super-wideband audio coding&#xff09;是一种低延迟的音频编解码器&#xff0c;用于实时的语音通信。它提供高质量的音频传输&#xff0c;并且适用于各种比特率和带宽条件。SILK…...

掌握Python爬虫实现网站关键词扩展提升曝光率

目录 一、关键词优化的重要性 二、关键词优化的基本方法 1、选择与网站内容相关的关键词 2、控制关键词的密度和分布 3、关键词的层次布局 三、Python爬虫实现网站关键词扩展 1、确定目标网站 2、分析目标网站的HTML结构 3、编写Python爬虫代码 4、分析爬取到的关键词…...

ajax实现原理

网页应用能够快速地将增量更新呈现在用户界面上&#xff0c;而不需要重载&#xff08;刷新&#xff09;整个页面。这使得程序能够更快地回应用户的操作 Ajax的实现原理 创建Ajax对象 传入请求方式和请求地址 发送请求 获取服务器与客户端的响应数据 xhr.responseText // 1…...

图G的拉普拉斯矩阵为什么由L=D-A定义

图G的拉普拉斯矩阵由LD-A定义&#xff0c;其中D是度矩阵&#xff08;Degree Matrix&#xff09;&#xff0c;A是邻接矩阵&#xff08;Adjacency Matrix&#xff09;。这种定义方式有以下原因&#xff1a; 1. 度矩阵D&#xff1a;度矩阵是一个对角矩阵&#xff0c;其对角线上的…...

实习项目遇到的bug

问题1&#xff1a; 大概是因为没设置ts类型&#xff0c;它查不到的问题&#xff0c;不定义的话加上问号&#xff0c;加上可选链就不会报错了 {{bizEquipmentInfo.lastUnlockingVO?.lastUnlockingTime.replace(T, )? bizEquipmentInfo.lastUnlockingVO?.lastUnlockingTime.r…...

python selenium下载一个合适的chromedriver.exe(稳定版本)

可以使用该脚本来进行下载&#xff1a; 下载前需要安装如下的依赖 requests2.27.1 selenium4.14.0 webdriver_manager4.0.1下载脚本代码&#xff1a; import json import subprocess import shutil import os import time import zipfileimport requests from webdriver_mana…...

耦合详解-模块

耦合详解 耦合(Coupling)是衡量软件模块之间相互依赖程度的指标。低耦合是优秀软件设计的核心目标之一,它使系统更易于维护、测试和扩展。 1. 耦合的本质 耦合描述的是两个模块(类、组件、服务)之间的依赖关系强度。当修改一个模块时,需要修改其他模块的程度越高,耦合…...

【JAVA基础面经】深拷贝与浅拷贝

文章目录基本概念浅拷贝深拷贝重写 clone() 方法实现深拷贝使用序列化实现深拷贝使用复制构造函数或工厂方法基本概念 浅拷贝&#xff1a;创建一个新对象&#xff0c;然后将原对象的非静态字段&#xff08;基本类型和引用类型&#xff09;直接复制到新对象中。对于引用类型字段…...

行波管TWT聚焦系统硬核拆解:PPM vs PCM 核心区别、原理对比与工程选型全指南

对于行波管&#xff08;TWT&#xff09;研发工程师、射频微波专业学生、雷达 / 通信系统硬件从业者而言&#xff0c;电子注聚焦系统是决定器件生死的核心模块—— 它直接决定了电子注的流通率、注波互作用效率&#xff0c;甚至是器件的长期可靠性。在永磁聚焦方案中&#xff0c…...

YOLO-v8.3实战:用AI识别图片中的物体,5分钟完成你的第一个检测项目

YOLO-v8.3实战&#xff1a;用AI识别图片中的物体&#xff0c;5分钟完成你的第一个检测项目 你是否曾经好奇&#xff0c;那些能自动识别照片中物体的人工智能是如何工作的&#xff1f;想象一下&#xff0c;你拍了一张街景照片&#xff0c;AI不仅能告诉你照片里有汽车、行人和红…...

终极英雄联盟工具集:3大核心功能让你轻松掌控游戏全局

终极英雄联盟工具集&#xff1a;3大核心功能让你轻松掌控游戏全局 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit…...

Pi0一键部署教程:nohup后台运行+log实时监控+进程安全终止

Pi0一键部署教程&#xff1a;nohup后台运行log实时监控进程安全终止 本文介绍如何快速部署和运行Pi0机器人控制模型&#xff0c;重点讲解后台运行、日志监控和进程管理的实用技巧&#xff0c;让AI应用稳定运行在服务器环境中。 1. 项目简介&#xff1a;什么是Pi0&#xff1f; …...

【C语言】memmove()函数实战:如何安全高效地处理内存重叠拷贝

1. 为什么需要memmove()函数&#xff1f; 在C语言中处理内存拷贝时&#xff0c;我们经常会遇到一个棘手的问题&#xff1a;当源内存块和目标内存块存在重叠区域时&#xff0c;使用memcpy()函数可能会导致数据被意外覆盖。想象一下你在整理书架&#xff0c;想把第三层到第五层的…...

【Java 21记录模式性能优化终极指南】:3个被90%开发者忽略的模式匹配陷阱及提速300%的实战方案

第一章&#xff1a;Java 21记录模式性能优化全景概览Java 21 引入的记录模式&#xff08;Record Patterns&#xff09;不仅提升了模式匹配的表达力&#xff0c;更在JVM层面实现了多项关键性能优化。通过与模式匹配&#xff08;Pattern Matching for instanceof&#xff09;和解…...

海淀AI,集体开弓:少年极客、中年创客与ICU归来者

田晏林 发自 凹非寺量子位 | 公众号 QbitAI春分之后的北京海淀&#xff0c;暖意至&#xff0c;万物生。人工智能产业的发展更是如火如荼。过去五天里&#xff0c;位于“宇宙中心”五道口的AI原点社区&#xff0c;30多场派对狂欢不停。这是在第三届中关村论坛“人工智能主题日”…...

小米测试开发面试全解析:从理论到实战

1. 小米测试开发面试全流程解析 第一次参加小米测试开发面试的朋友可能会有点懵&#xff0c;不知道从哪开始准备。作为一个经历过完整面试流程的"过来人"&#xff0c;我来分享一下我的真实经历。小米的测试开发面试一般分为2-3轮&#xff0c;每轮侧重点不同&#xff…...