clipboard.js(web页面实现点击复制)

文章目录

  • code
  • show

一个很简单的需求,一个单页面需要一个点击复制的功能
后来在线上找到一个clipboard.js可以实现,这里只用到了最基础的用法,页面样式布局基于bootstrap5.2.3

code


<div class="d-flex align-items-center justify-content-center w-100"><div class="me-4 px-8 py-2" style="height: 100px; background: url(./img/202405311837364.png) no-repeat; width: 60%; background-size: cover"><input id="copyValue" class="w-100 copy h-100 fs-3" type="text" value="0x3d2eF97dC93341Af0a3686395059b8EfCBfcCF26" /></div><img class="to_copy" data-clipboard-target="#copyValue" style="width: 32px; cursor: pointer" src="./img/202405311826855.png" alt="" />
</div><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
// 复制
var clipboard = new ClipboardJS(".to_copy");clipboard.on("success", function (e) {alert("复制成功");e.clearSelection();});clipboard.on("error", function (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);});

show

在这里插入图片描述

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

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

相关文章

【数据分享】《中国文化文物与旅游统计年鉴》2022

最近老有同学过来询问《中国旅游年鉴》、《中国文化文物统计年鉴》、《中国文化和旅游统计年鉴》、《中国文化文物与旅游统计年鉴》&#xff0c;这四本年年鉴的关系以及怎么获取这四本年鉴。今天就在这里给大家分享一下这四本年鉴的具体情况。 实际上2018年&#xff0c;为适应…

06 Linux 设备驱动模型

1、Overview Linux-2.6 引入的新的设备管理机制 - kobject 降低设备多样性带来的 Linux 驱动开发的复杂度,以及设备热拔插处理、电源管理等将硬件设备归纳、分类,然后抽象出一套标准的数据结构和接口驱动的开发,就简化为对内核所规定的数据结构的填充和实现驱动模型是 Linu…

【Three.js】知识梳理十:Three.js纹理贴图

1. 纹理贴图 在Three.js中&#xff0c;纹理贴图是一种将二维图像贴到三维物体表面的技术&#xff0c;以增强物体的视觉表现。纹理贴图可以使物体表面更加真实、细腻&#xff0c;为场景增色不少。 在Three.js中&#xff0c;纹理贴图的加载主要通过THREE.TextureLoader类实现。…

【C++ | 左值、右值】一文了解C++的左值、右值、左值引用()、右值引用()

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-06-12 1…

CSS真题合集(一)

CSS真题合集&#xff08;一&#xff09; 1. 盒子模型1.1 盒子模型的基本组成1.2 盒子模型的实际大小1.3 盒子模型的两种类型1.4 设置盒子模型1.5 弹性盒子模型 2. BFC2.1 主要用途2.2 触发BFC的方法2.2 解决外边距的塌陷问题&#xff08;垂直塌陷&#xff09; 3. 响应式布局3.1…

LWIP移植

目录 前言一、以太网协议简介1.1 TCP/IP协议简介1.2 STM32的ETH外设1.2.1 MAC子层1.2.2 SMI站管理接口1.2.3 MII和RMII接口 1.3 外部PHY芯片LAN87201.3.1 LAN8720 中断管理1.3.2 PHY 地址设置1.3.3 nINT/REFCLKO 配置1.3.4 LAN8720 内部寄存器 1.4 LWIP 简介 二、带操作系统的移…

pxe批量部署linux介绍

1、PXE批量部署的作用及必要性&#xff1a; 1&#xff09;智能实现操作系统的批量安装&#xff08;无人值守安装&#xff09;2&#xff09;减少管理员工作&#xff0c;提高工作效率3&#xff09;可以定制操作系统的安装流程a.标准流程定制(ks.cfg)b.自定义流程定制(ks.cfg(%pos…

北京医院共享轮椅小程序开发更贴心,更便捷

在大数据不断发展的今天&#xff0c;资源共享已随处可见&#xff0c;小到共享充电宝&#xff0c;共享雨伞&#xff0c;大到共享单车&#xff0c;汽车。这些常用资源的共享&#xff0c;充分实现了有限资源的最大化利用。 如今&#xff0c;众多北京医院&#xff0c;也结合自身实…

15.RedHat认证-Ansible自动化运维(上)

15.RedHat认证-Ansible自动化运维(上) RHCE8-RH294 Ansible自动化&#xff08;Ansible版本是2.8.2&#xff09; Ansible介绍 1.Ansible是什么&#xff1f; Ansible是一个简单的强大的无代理的自动化运维工具&#xff08;Ansible是自动化运维工具&#xff09;Ansible特点 简…

Anconda安装

参考: centos7篇---安装anaconda_centos7安装anaconda-CSDN博客 CentOS 7 上安装 Anaconda_centos安装conda-CSDN博客 CentOS7 安装Anaconda 的步骤_centos7安装anaconda-CSDN博客 centos7 如何安装与使用 Anaconda - 码农教程 下载 wget命令 wget https://repo.anaconda…

springboot+minio+kkfileview实现文件的在线预览

在原来的文章中已经讲述过springbootminio的开发过程&#xff0c;这里不做讲述。 原文章地址&#xff1a; https://blog.csdn.net/qq_39990869/article/details/131598884?spm1001.2014.3001.5501 如果你的项目只是需要在线预览图片或者视频那么可以使用minio自己的预览地址进…

Linux Ext2/3/4文件系统

文章目录 前言一、Linux文件系统简介1.1 简介1.2 Linux File System Structure1.3 Directory Structure 二、Ext2/3/4文件系统2.1 Minix2.2 EXT2.3 EXT22.4 EXT32.5 EXT4 三、EXT Inode参考资料 前言 这篇文章介绍了Linux文件系统的一些基础知识&#xff1a;Linux 文件系统简介…

推荐网站(22)GeoSpy,根据图片显示地理位置

今天推荐一款名为GeoSpy的AI工具。它利用人工智能技术&#xff0c;通过分析照片中的光线、植被、建筑风格等细节线索&#xff0c;实现对拍摄地点的精确定位。令人难以置信的是,它对位置的定位准确度非常高。 GeoSpy之所以智能如此,是因为它将输入的照片与大量的街景和地理图像…

【LLM】度小满金融大模型技术创新与应用探索

note 从通用大模型到金融大模型金融大模型的训练技术创新金融大模型的评测方法创新金融大模型的应用实践创新总结&#xff1a;金融大模型迭代路径 一、轩辕大模型 二、垂直大模型训练 1. 数据准备 数据质量是模型效果的保障。首先数据要丰富&#xff0c;这是必备的条件。我们…

YASKAWA机器人HW1171921-B电缆维修

安川机器人作为现代工业自动化的重要设备&#xff0c;其稳定运行对于生产线的连续性和效率至关重要。然而&#xff0c;随着使用时间的增长&#xff0c;可能会出现各种YASKAWA机器人本体线缆故障&#xff0c;如断线、短路、接触不良等。 一、安川工业机器人电缆维修前的准备 在进…

大模型的现状与未来:探索腾讯元宝APP及其他AIGC产品

前言 随着近日腾讯元宝APP的正式上线&#xff0c;国内大模型产品又添一员。近年来&#xff0c;随着人工智能技术的快速发展&#xff0c;AIGC&#xff08;AI生成内容&#xff09;产品逐渐成为技术与商业应用的热点。各大互联网厂商纷纷推出自己的大模型产品&#xff0c;以期在这…

疑惑...2024年是不是转行AI产品经理的好时机?

前言 这两年AI突然“火起来” 了 &#xff0c;算是出现了一个“大转折”。 因为就在这2年里&#xff0c;全球所有“大厂”几乎同一时间挤破头在跟进AI技术&#xff0c;从ChatGPT发布&#xff0c;到谷歌、Facebook、亚马逊等都紧跟其后&#xff0c;再到国内百度、腾讯、阿里、…

蓝牙芯片TD5322A,蓝牙5.1数传芯片介绍—拓达半导体

蓝牙芯片原厂&#xff0c;拓达芯片TD5322A是一颗支持蓝牙BLE和SPP的数传芯片&#xff0c;蓝牙5.1版本。芯片的优点是尺寸小(SOP-8封装&#xff09;&#xff0c;性能强&#xff0c;价格低&#xff0c;以及简单明了的透传和串口AT控制功能&#xff0c;大大降低了在其它电子产品中…

C++学习笔记(23)——二叉树进阶

系列文章 http://t.csdnimg.cn/QDR3y 目录 系列文章[TOC](目录) 1. 二叉树的优势2. 二叉搜索树概念3. 二叉搜索树操作1. 二叉搜索树的查找2. 二叉搜索树的插入——地址链接重设3. 二叉搜索树的删除——地址链接重设 4. 二叉搜索树的应用——以key为载体&#xff0c;承载复杂信…

在矩池云使用GLM-4的详细指南(无感连GitHubHuggingFace)

GLM-4-9B 是智谱 AI 推出的最新一代预训练模型 GLM-4 系列中的开源版本&#xff0c;在多项测试中表现出超越已有同等规模开源模型的性能&#xff0c;它能兼顾多轮对话、网页浏览、代码执行、多语言、长文本推理等多种功能&#xff0c;性能更加强大。其多模态语言模型GLM-4V-9B在…