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

Clipboard.js实现复制文本到剪贴板功能

news 文章来源：https://blog.csdn.net/weixin_44146294/article/details/142628504 2024/11/19 8:41:12

一、Clipboard.js简介

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。
官网地址：Clipboard.js
浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+

二、Clipboard.js安装

2.1、NPM安装

你可以在 npm 上获取它：
npm install clipboard --save

2.2、ZIP安装

如果您不喜欢包管理，只需下载ZIP文件即可：Clipboard.js的ZIP文件。

三、使用Clipboard.js

3.1、在页面引入clipboard.js

<script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>

现在，你需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化它。

3.2、从元素属性复制文本

事实是，您甚至不需要其他元素来复制其内容。您可以只在 trigger 元素中包含一个属性：data-clipboard-text。

<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a>

3.2.1、执行JS事件

<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>

3.2.2、执行JS事件效果

执行效果

3.3、从其他元素剪切文本

此外，您还可以定义一个属性来指定是否要 或 content。data-clipboard-actioncopycut；如果省略此属性，则默认使用：copy

3.2.1、HTML代码

<textarea name="" id="bar"></textarea>
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a>

3.3.2、执行JS事件

<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>

3.3.3、执行JS事件效果

执行效果

3.4、以下是完整的HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clipboard.js实现复制文本到剪贴板功能</title><script src="js/node_modules/jquery/dist/jquery.js" type="text/javascript"></script><script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>
</head><body><!-- 从其他元素剪切文本 --><textarea name="" id="bar"></textarea><a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a><!-- 从元素属性复制文本 --><a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a><textarea name="" id="bar"></textarea></body></html>
<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>

相关文章：

Clipboard.js实现复制文本到剪贴板功能

一、Clipboard.js简介 Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件&#xff0c;该插件可以将输入框&#xff0c;文本域&#xff0c;DOM节点元素中的文本内容复制到剪贴板中。 官网地址&#xff1a;Clipboard.js 浏览器兼容性&#xff1a;兼容Chrome、…...

编程日记 2024/9/30 19:51:27

Harbor安装笔记

下载离线安装包 wget https://github.com/goharbor/harbor/releases/download/v2.11.1/harbor-offline-installer-v2.11.1.tgz 解压 tar -zxvf harbor-offline-installer-v2.11.1.tgz 复制一份配置文件出来&#xff0c;修改配置 cp harbor.yml.tmpl harbor.yml vim harbor…...

编程日记 2024/9/30 19:49:24

HTTP 1.0 2.0 3.0详解

HTTP HTTP全称超文本传输协议&#xff0c;是一种属于应用层的通信协议。它允许将超文本标记语言文档&#xff08;HTML&#xff09;从Web服务器传输到客户端的浏览器。 HTTP报文结构 请求报文结构 请求方法&#xff1a; GET&#xff1a;一般用来请求已被URI识别的资源&#x…...

编程日记 2024/9/30 19:47:23

Python操作TXT文本：从入门到精通

在数字化时代，文本处理成为了许多工作和项目的基础。Python作为一种强大且易学的编程语言，在文本处理方面展现出了无与伦比的优势。本文将通过举例的方式，向读者介绍如何使用Python来操作TXT文本，让您轻松掌握文本处理的精髓。 一、读取TXT文本内容 首先，我们需要学会如…...

编程日记 2024/9/30 19:46:22

开源 AI 智能名片 2+1 链动模式 S2B2C 商城小程序的数据运营策略与价值创造

一、引言 1.1 研究背景 在当今数字化时代&#xff0c;数据运营已成为企业发展的核心驱动力。开源 AI 智能名片 21 链动模式 S2B2C 商城小程序作为一种创新的营销工具&#xff0c;与数据运营紧密相连。该小程序通过集成人工智能、大数据分析等先进技术&#xff0c;能够实时收集…...

编程日记 2024/9/30 19:45:21

ip 地址查看cmd命令

ip 地址查看cmd命令 在不同的操作系统中&#xff0c;查看IP地址的命令可能会有所不同。以下是一些常见操作系统中查看IP地址的命令&#xff1a; Windows: 打开命令提示符&#xff08;CMD&#xff09;&#xff0c;然后输入 ipconfig 命令。 Linux/Unix: 打开终端&#xff0…...

编程日记 2024/9/30 19:44:19

力扣9.26

931. 下降路径最小和 给你一个 n x n 的 方形 整数数组 matrix &#xff0c;请你找出并返回通过matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开始&#xff0c;并从每一行中选择一个元素。在下一行选择的元素和当前行所选元素最多相隔一列&#xff08;即…...

编程日记 2024/9/30 19:42:17

HT8731 内置自适应H类升压和防破音功能的10W D类及AB类音频功率放大器

1、特点 防削顶失真功能(防破音,Anti-Clipping Function, ACF) 免滤波器数字调制&#xff0c;直接驱动扬声器 输出功率 10W(VBAT4.2V,RL3Ω,THDN10%, fiN 1kHz) 6W(VBAT3.3~4.2V,RL4Ω,THDN<1%,20-20kHz 全频段) 3W (VBAT3.3~4.2V,RL8Ω, THDN<1%, 20- 20kHz 全频段 VB…...

编程日记 2024/9/30 19:39:13

webpack使用

一、简介 概述 本次使用webpack4进行构建打包 二、webpack 安装webpack、webpack-cli npm install webpack4.2.0 webpack-cli4.2.0 -D 三、loader 加载器概述 raw-loader&#xff1a;加载文件原始内容&#xff08;utf-8&#xff09; file-loader&#xff1a;把文件输出…...

编程日记 2024/9/30 19:38:12

高通Android 12 音量API设置相关代码

// 获取当前音量大小public static int getCurrentVolume(Context context) {AudioManager audioManager (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);return audioManager.getStreamVolume(AudioManager.STREAM_MUSIC); // 使用 STREAM_MUSIC 作为示例…...

编程日记 2024/9/30 19:37:11

Qt开发第一讲

一、Qt项目里面有什么&#xff1f; 对各个文件的解释&#xff1a; Empty.pro文件 QT core gui # 要引入的Qt模块&#xff0c;后面学习到一些内容的时候可能会修改这里 #这个文件相当于Linux里面的makefile文件。makefile其实是一个非常古老的技术了。 #qmake搭配.pr…...

编程日记 2024/9/30 19:36:10

详细指南：如何有效解决Windows系统中msvcp140.dll丢失的解决方法

如果你在使用Windows系统时遇到“msvcp140.dll丢失”的错误提示&#xff0c;通常是因为你的计算机上缺少或损坏了msvcp140.dll文件。msvcp140.dll是Microsoft Visual C Redistributable包的一部分&#xff0c;许多应用程序和游戏需要它来正常运行。以下是几种解决msvcp140.dll丢…...

编程日记 2024/9/30 19:35:09

【RabbitMQ】幂等性、顺序性

幂等性 概述 幂等性是数学和计算机科学中某些运算的性质&#xff0c;他们可以被多次应用&#xff0c;而不会改变初始应用的结果。RabbitMQ的幂等性则是指同一条消息&#xff0c;多次消费&#xff0c;对系统的影响是相同的。 一般消息中间件的消息传输保障分为三个层级&#…...

编程日记 2024/9/30 19:34:07

FFmpeg源码：avio_skip函数分析

AVIOContext结构体和其相关的函数分析&#xff1a; FFmpeg源码&#xff1a;avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码&#xff1a;read_packet_wrapper、fill_buffer函数分析 FFmpeg源码&#xff1a;avio_read函数分析 FFmpeg源码&#xff…...

编程日记 2024/9/30 19:30:53

Llama 3.1 技术研究报告-6

6 推理 我们研究了两种主要技术&#xff0c;以使 Llama 3 405B 模型的推理⾼效&#xff1a;(1) 流⽔线并⾏和 (2) FP8 量化。我们已经公开发布了我们的 FP8 量化实现。 6.1 流⽔线并⾏ 当使⽤ BF16 数字表⽰模型参数时&#xff0c;Llama 3 405B 不适合在装有 8 个 Nvidia H1…...

编程日记 2024/9/30 19:27:50

更新日志-Python OS

这么久没更新全是因为这段时间的事情很多&#xff0c;只能一点一点的更新代码&#xff0c;不过好在&#xff0c;也是成功更新出来啦&#xff01; 更新日志&#xff08;2024/9/29&#xff09; 代码全文更新&#xff0c;将所有的绝对路径替换为相对路径&#xff0c;这样在各位大…...

编程日记 2024/9/30 19:26:49

Chrome浏览器的C++内存管理技术揭秘

Chrome浏览器作为全球最流行的网络浏览器之一&#xff0c;其高效的内存管理技术功不可没。本文将深入探讨Chrome浏览器在C中的内存管理技术&#xff0c;并介绍如何通过调整网页加载时间、优化视频播放体验和解决谷歌浏览器占用CPU过高的问题来提升浏览器性能。 &#xff08;本…...

编程日记 2024/9/30 19:25:48

Redis --- redis事务和分布式事务锁

redis事务基本实现 Redis 可以通过 MULTI&#xff0c;EXEC&#xff0c;DISCARD 和 WATCH 等命令来实现事务(transaction)功能。 > MULTI OK > SET USER "Guide哥" QUEUED > GET USER QUEUED > EXEC 1) OK 2) "Guide哥"使用 MULTI命令后可以输入…...

编程日记 2024/9/30 19:24:47

SQL，将多对多的关联记录按行输出

数据库的Primary表和Secondary表有相同的结构&#xff0c;其中W、H、D是主键。Primary表&#xff1a;NameWHDPrimary item 1100500300Primary item 2100600300Primary item 3200500300Primary item 4100500300Primary item 5100600300Primary item 6200500300 Secondary表&…...

编程日记 2024/9/30 19:23:46

【SQL】筛选字符串与正则表达式

目录 语法 需求 示例 分析 代码 语法 SELECT column1, column2, ... FROM table_name WHERE condition; WHERE 子句用于指定过滤条件&#xff0c;以限制从数据库表中检索的数据。当你执行一个查询时&#xff0c;WHERE 子句允许你筛选出满足特定条件的记录。如果记录满…...

编程日记 2024/9/30 19:21:44

【Redis入门到精通五】Java如何像使用MySQL一样使用Redis(jedis安装及使用)

目录 Jedis 1.jedis是什么 2.jedis的安装配置 3.jedis的基础命令操作展示 1.set和get操作&#xff1a; 2.exists和del操作&#xff1a; 3.keys和type操作&#xff1a; 4. expire和ttl&#xff1a; Jedis Java 操作 redis 的客⼾端有很多&#xff0c;其中最知名的是 jedi…...

编程日记 2024/9/30 19:20:42

【 微信机器人+ AI 搭建】

摘要&#xff1a; 各种大模型已经出来好久了&#xff0c;各类app也已经玩腻了&#xff0c;接下来&#xff0c;就在考虑&#xff0c;怎么让大模型&#xff0c;利益最大化。 本人没有显著的家世&#xff0c;没有富婆包养&#xff0c;只能自己抽点时间&#xff0c;研究下技术&…...

编程日记 2024/9/30 19:19:41

VGG16网络介绍及代码撰写详解（总结1）

可以从本人以前的文章中可以看出作者以前从事的是嵌入式控制方面相关的工作&#xff0c;是一个机器视觉小白&#xff0c;之所以开始入门机器视觉的学习只要是一个idea&#xff0c;想把机器视觉与控制相融合未来做一点小东西。废话不多说开始正题。 摘要&#xff1a;本文是介绍V…...

编程日记 2024/9/30 19:18:40

多个excel表数据比对操作

多个excel表数据比对操作 本文主要使用两种方法进行比对，分别使用了openpyxl第三方库和pandas第三方库进行数据比对 两种方法优缺点： openpyxy: 优点：主要是处理xlsx的文件，里面方法简单，易懂 缺点：当数据量大的时候，速度很慢，之前我一条一条数据拿出来比较，两百多条…...

编程日记 2024/9/30 19:17:38

golang学习笔记32——哪些是用golang实现的热门框架和工具

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

编程日记 2024/9/30 19:15:37

ZYNQ：开发环境搭建

资料下载 http://47.111.11.73/docs/boards/fpga/zdyz_qimxing(V2).html Vivado软件是什么&#xff1f; Vivado软件是Xilinx&#xff08;赛灵思&#xff09;公司推出的一款集成设计环境&#xff08;IDE&#xff09;&#xff0c;主要用于FPGA&#xff08;现场可编程门阵列&am…...

编程日记 2024/9/30 19:13:34

一步一步丰富生成式语言模型系统

以下是这套生成式语言模型解决任务的流程图概述&#xff1a; #mermaid-svg-sRHDSMUMV1utrg2F {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sRHDSMUMV1utrg2F .error-icon{fill:#552222;}#mermaid-svg-sRHDSMUMV1u…...

编程日记 2024/9/30 19:10:32

Python中元组的常用方法

# 在Python中&#xff0c;元组&#xff08;tuple&#xff09;是一种不可变的序列类型&#xff0c;用于存储多个元素。元组的特点包括&#xff1a; # # 不可变性&#xff1a;一旦创建&#xff0c;元组的元素不能改变。这意味着不能添加、删除或修改元组中的元素。 # 可以包含任何…...

编程日记 2024/9/30 19:09:31

新版本Android Studio如何新建Java code工程

新版本Android Studio主推Kotlin&#xff0c;很多同学以为无法新建Java工程了&#xff0c;其实是可以的&#xff0c;如果要新建Java代码的Android工程&#xff0c;在New Project的时候需要选择Empty Views Activity&#xff0c;如图所示&#xff0c;gradle也建议选为build.grad…...

编程日记 2024/9/30 19:07:29

2024年世界职业院校技能大赛:全面升级的国际化职业技能竞赛

近日,中华人民共和国教育部发布了《2024年世界职业院校技能大赛实施方案》,宣布从2024年起将全国职业院校技能大赛升级为世界职业院校技能大赛。这一重大决策不仅标志着我国职业教育竞赛平台的全面国际化,更彰显了中国在全球职业教育领域的引领作用和战略眼光&#xff0c;具体内…...

编程日记 2024/9/30 19:06:27

江西建设职业技术学院迎新网站/关键的近义词

幂级数收敛 幂级数收敛求收敛半径一般是lim⁡n→∞an1anp,r1p\lim\limits_{n\to\infty}\frac{a_{n1}}{a_{n}}p,r\frac{1}{p}n→∞lim​an​an1​​p,rp1​或者开n次以后求极限。 但是对于抽象幂级数&#xff0c;可能先凑出一个半径&#xff0c;然后用幂级数性质说明 x1的时候…...

编程日记 2024/11/19 7:10:54

网站流量分析系统/电商运营培训大概多少学费

仅作为记录&#xff0c;大佬请跳过。 感谢大佬博主文章&#xff1a; 传送门 传送门2...

编程日记 2024/11/19 7:04:50

wordpress 投稿 图片大小/百度权重是怎么来的

转载地址&#xff1a;点击打开链接 awk是一种编程语言&#xff0c;用于在Linux/unix下对文本和数据进行处理。数据可以来自标准输入(stdin)、一个或多个文件&#xff0c;或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能&#xff0c;是linux/unix下的一个强…...

编程日记 2024/11/19 3:48:52

咸宁网站建设网络公司/站内免费推广有哪些

WordPress 登录界面 404 问题 WordPress 登录界面 404 问题 问题描述&#xff1a; 你没有办法登录到 WordPress 后台&#xff0c;显示 404 错误。 解决办法1&#xff1a; 在数据库你面更新 URL。 如果你可以进入到 phpMyAdmin&#xff0c;尝试在数据库里面更新 URL。 1. 登…...

编程日记 2024/11/19 2:19:23

广州做网站厉害的公司/营销策略4p分析怎么写

在部署应用的时候&#xff0c;有时候应用可以直接启动&#xff0c;但偶尔应用却无法启动&#xff0c;报错信息是&#xff1a; java.sql.SQLRecoverableException: IO Error: Got minus one from a read call 如图&#xff1a; 原因及解决方法 我有好几个应用系统需要连接数据…...

编程日记 2024/11/19 1:36:58

清远网站seo公司/东莞建设企业网站

向浏览器中输出&#xff1a;echo()、print()、printf()echo、print、printf本身是函数&#xff0c;即函数()。但这里的输出函数可以省略括号&#xff0c;用空格所需显示的字符串或变量。echo和print功能几乎相同&#xff0c;而echo运行速度上比print稍稍快一点。因为print有返回…...

编程日记 2024/11/18 23:03:10