Clipboard.js实现复制文本到剪贴板功能
一、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插件,该插件可以将输入框,文本域,DOM节点元素中的文本内容复制到剪贴板中。 官网地址:Clipboard.js 浏览器兼容性:兼容Chrome、…...
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 复制一份配置文件出来,修改配置 cp harbor.yml.tmpl harbor.yml vim harbor…...
HTTP 1.0 2.0 3.0详解
HTTP HTTP全称超文本传输协议,是一种属于应用层的通信协议。它允许将超文本标记语言文档(HTML)从Web服务器传输到客户端的浏览器。 HTTP报文结构 请求报文结构 请求方法: GET:一般用来请求已被URI识别的资源&#x…...
Python操作TXT文本:从入门到精通
在数字化时代,文本处理成为了许多工作和项目的基础。Python作为一种强大且易学的编程语言,在文本处理方面展现出了无与伦比的优势。本文将通过举例的方式,向读者介绍如何使用Python来操作TXT文本,让您轻松掌握文本处理的精髓。 一、读取TXT文本内容 首先,我们需要学会如…...
开源 AI 智能名片 2+1 链动模式 S2B2C 商城小程序的数据运营策略与价值创造
一、引言 1.1 研究背景 在当今数字化时代,数据运营已成为企业发展的核心驱动力。开源 AI 智能名片 21 链动模式 S2B2C 商城小程序作为一种创新的营销工具,与数据运营紧密相连。该小程序通过集成人工智能、大数据分析等先进技术,能够实时收集…...
ip 地址查看cmd命令
ip 地址查看cmd命令 在不同的操作系统中,查看IP地址的命令可能会有所不同。以下是一些常见操作系统中查看IP地址的命令: Windows: 打开命令提示符(CMD),然后输入 ipconfig 命令。 Linux/Unix: 打开终端࿰…...
力扣9.26
931. 下降路径最小和 给你一个 n x n 的 方形 整数数组 matrix ,请你找出并返回通过matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开始,并从每一行中选择一个元素。在下一行选择的元素和当前行所选元素最多相隔一列(即…...
HT8731 内置自适应H类升压和防破音功能的10W D类及AB类音频功率放大器
1、特点 防削顶失真功能(防破音,Anti-Clipping Function, ACF) 免滤波器数字调制,直接驱动扬声器 输出功率 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…...
webpack使用
一、简介 概述 本次使用webpack4进行构建打包 二、webpack 安装webpack、webpack-cli npm install webpack4.2.0 webpack-cli4.2.0 -D 三、loader 加载器概述 raw-loader:加载文件原始内容(utf-8) file-loader:把文件输出…...
高通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 作为示例…...
Qt开发第一讲
一、Qt项目里面有什么? 对各个文件的解释: Empty.pro文件 QT core gui # 要引入的Qt模块,后面学习到一些内容的时候可能会修改这里 #这个文件相当于Linux里面的makefile文件。makefile其实是一个非常古老的技术了。 #qmake搭配.pr…...
详细指南:如何有效解决Windows系统中msvcp140.dll丢失的解决方法
如果你在使用Windows系统时遇到“msvcp140.dll丢失”的错误提示,通常是因为你的计算机上缺少或损坏了msvcp140.dll文件。msvcp140.dll是Microsoft Visual C Redistributable包的一部分,许多应用程序和游戏需要它来正常运行。以下是几种解决msvcp140.dll丢…...
【RabbitMQ】幂等性、顺序性
幂等性 概述 幂等性是数学和计算机科学中某些运算的性质,他们可以被多次应用,而不会改变初始应用的结果。RabbitMQ的幂等性则是指同一条消息,多次消费,对系统的影响是相同的。 一般消息中间件的消息传输保障分为三个层级&#…...
FFmpeg源码:avio_skip函数分析
AVIOContext结构体和其相关的函数分析: FFmpeg源码:avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码:read_packet_wrapper、fill_buffer函数分析 FFmpeg源码:avio_read函数分析 FFmpeg源码ÿ…...
Llama 3.1 技术研究报告-6
6 推理 我们研究了两种主要技术,以使 Llama 3 405B 模型的推理⾼效:(1) 流⽔线并⾏和 (2) FP8 量化。我们已经公开发布了我们的 FP8 量化实现。 6.1 流⽔线并⾏ 当使⽤ BF16 数字表⽰模型参数时,Llama 3 405B 不适合在装有 8 个 Nvidia H1…...
更新日志-Python OS
这么久没更新全是因为这段时间的事情很多,只能一点一点的更新代码,不过好在,也是成功更新出来啦! 更新日志(2024/9/29) 代码全文更新,将所有的绝对路径替换为相对路径,这样在各位大…...
Chrome浏览器的C++内存管理技术揭秘
Chrome浏览器作为全球最流行的网络浏览器之一,其高效的内存管理技术功不可没。本文将深入探讨Chrome浏览器在C中的内存管理技术,并介绍如何通过调整网页加载时间、优化视频播放体验和解决谷歌浏览器占用CPU过高的问题来提升浏览器性能。 (本…...
Redis --- redis事务和分布式事务锁
redis事务基本实现 Redis 可以通过 MULTI,EXEC,DISCARD 和 WATCH 等命令来实现事务(transaction)功能。 > MULTI OK > SET USER "Guide哥" QUEUED > GET USER QUEUED > EXEC 1) OK 2) "Guide哥"使用 MULTI命令后可以输入…...
SQL,将多对多的关联记录按行输出
数据库的Primary表和Secondary表有相同的结构,其中W、H、D是主键。Primary表:NameWHDPrimary item 1100500300Primary item 2100600300Primary item 3200500300Primary item 4100500300Primary item 5100600300Primary item 6200500300 Secondary表&…...
【SQL】筛选字符串与正则表达式
目录 语法 需求 示例 分析 代码 语法 SELECT column1, column2, ... FROM table_name WHERE condition; WHERE 子句用于指定过滤条件,以限制从数据库表中检索的数据。当你执行一个查询时,WHERE 子句允许你筛选出满足特定条件的记录。如果记录满…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项
一、条形码识别改名使用教程 打开软件并选择处理模式:打开软件后,根据要处理的文件类型,选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件,就选择 “PDF 识别模式”;若是处理图片文件&…...
标注工具核心架构分析——主窗口的图像显示
🏗️ 标注工具核心架构分析 📋 系统概述 主要有两个核心类,采用经典的 Scene-View 架构模式: 🎯 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 🔧 关键函数&…...
