当前位置: 首页 > 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…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”

非常好&#xff0c;我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题&#xff0c;统一使用 二重复合函数&#xff1a; z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y))​ 来全面说明。我们会展示其全微分形式&#xff08;偏导…...