js复制内容到剪贴板实现复制粘贴功能

js复制内容到剪贴板实现复制粘贴功能
第一种方法,用到 clipboard.js 插件
clipboard 版本是1.5.12,cdn地址如下:

<script src='https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js'></script>

情况一:复制某标签的内容
结构:

  <div id="div1">这里放要复制的内容</div>
  <button id="copyLink" data-clipboard-action="copy" data-clipboard-target="#div1"> 复制到剪贴板 </button>

js代码:

  document.getElementById("copyLink").onclick=function(){
	const btnCopy = new Clipboard("#copyLink");//放选择器
	alert("复制成功");
  };

情况二:复制某标签的属性值
结构:

  <input id="input1" value="这里放要复制的内容" />
  <button id="copyLink" data-clipboard-action="copy" data-clipboard-target="#input1"> 复制到剪贴板 </button>
  document.getElementById("copyLink").onclick=function(){
	const btnCopy = new Clipboard("#copyLink");//放选择器
	alert("复制成功");
  };

注意:这种情况,目标标签只能是input textarea ,不能是其他的标签如div p ...

情况三:复制自己身上的属性(data-clipboard-text)对应的值:
结构:  

  <button id="copyLink" data-clipboard-action="copy" data-clipboard-text="这里放要复制的内容"> 复制到剪贴板 </button>

js代码:

  document.getElementById("copyLink").onclick=function(){
	const btnCopy = new Clipboard("#copyLink");//放选择器
	alert("复制成功");
  };

情况四:复制js中的变量内容
结构:

  <button id="copyLink"> 复制到剪贴板 </button>

js代码:

	document.getElementById("copyLink").onclick=function(){
		const btnCopy = new Clipboard("#copyLink");//放选择器
		var copyContentInfo = '这里放要复制的内容';
		btnCopy.text=function(){//重写text函数的返回值即可,return 什么就返回什么
			return copyContentInfo;
		};
		alert("成功");
	};

对于 data-clipboard-action 属性的说明:

值有常用两种:"copy"->复制		"cut"->剪切

new Clipboard的实例事件(成功和失败事件)

btnCopy.on('success', function(e){//成功
	console.info('Action:', e.action);//触发的是 copy 复制的动作,cut 是剪切
	console.info('Text:', e.text);    //已经复制好的内容
	console.info('Trigger:', e.trigger);//触发的源对象,说的是:谁点击的就是谁		这个 谁 代表是某个元素   
	alert("复制成功");

	e.clearSelection();  
});
btnCopy.on('error', function(e){//失败
	console.error('Action:', e.action); 
	console.error('Trigger:', e.trigger); 
});

第二种方法,是用原生js方法: document.execCommand
情况一:可编辑的标签(input textarea):
结构:

  <button id="copyLink"> 复制到剪贴板 </button>

js代码:

  document.getElementById("copyLink").onclick=function(){
	var copyContent="这里放要复制的内容";
	var input = document.createElement("input");//创建input标签
	input.setAttribute("value", copyContent); 
	document.body.appendChild(input);
	if(input.setSelectionRange){
		input.focus();
		input.setSelectionRange(0, -1);//全选
	}else{
		input.select();
	}
	document.execCommand("copy");
	alert("复制成功");
	
	document.body.removeChild(input);
  };

说明:这种情况,创建的标签只能有 input textarea,其他标签不行
情况二:非可编辑的标签(div p…):
结构:

  <div id="div1">这里放要复制的内容aadf</div>
  <button id="copyLink"> 复制到剪贴板 </button>

js代码:

  document.getElementById("copyLink").onclick=function(){
	var div1 = document.getElementById("div1");
	if(document.body.createTextRange){
		var range = document.body.createTextRange();
		range.moveToElementText(div1);
		range.select();
		document.execCommand("copy");
		alert("复制成功");
	}else if(window.getSelection) {
		var selection = window.getSelection();
		var range = document.createRange();
		range.selectNodeContents(div1);
		selection.removeAllRanges();
		selection.addRange(range);
		document.execCommand("copy");
		alert("复制成功");
	}else{
		alert("复制失败");
	}
	//document.body.removeChild(div1);
  };

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git tag标签使用

创建标签 git checkout test git tag -a v1.0.0 -m v1.0.0里程碑版本 git push origin v1.0.0 删除标签 git tag -d v1.0.0 git push origin :refs/tags/v1.0.0远程分支可以直接在页面删除

从底层结构开始学习FPGA(0)----FPGA的硬件架构层次(BEL Site Tile FSR SLR Device)

系列目录与传送门 《从底层结构开始学习FPGA》目录与传送门 Xilinx的FPGA&#xff0c;从硬件架构的角度可以划分为6个层次&#xff0c;从底层到顶层依次是&#xff1a; BEL&#xff08;最底层单元&#xff09;SiteTileFSRSLRDevice&#xff08;FPGA芯片&#xff09; 接下来我…

MySQL 锁机制

优质博文&#xff1a;IT-BLOG-CN 定义&#xff1a;锁是计算机协调多个进程或线程并发访问某一资源的机制。 一、表锁&#xff08;偏读&#xff09; MyISAM 引擎&#xff0c;开销小&#xff0c;加锁快&#xff0c;无死锁、锁定粒度大、发生锁冲突的粒度最高&#xff0c;并发度…

Pytorch常用的函数(七)空洞卷积详解

Pytorch常用的函数(七)空洞卷积详解 1 初识空洞卷积 1.1 空洞卷积与语义分割任务 语义分割面临的困境&#xff1a; 与检测模型类似&#xff0c;语义分割模型也是建立是分类模型基础上的&#xff0c;即利用CNN网络来提取特征进行分类。在CNN分类模型中&#xff0c;一般情况下…

jenkins Pipeline接入mysql

背景&#xff1a; jenkin pipeline进化过程如下&#xff1a; Jenkins Pipeline 脚本优化实践&#xff1a;从繁琐到简洁 >>>>> Jenkins Pipeline脚本优化&#xff1a;为Kubernetes应用部署增加状态检测>>>>>> 使用Jenkins和单个模板部署多个K…

在Visual Studio中调试 .NET源代码

前言 在我们日常开发过程中常常会使用到很多其他封装好的第三方类库&#xff08;NuGet依赖项&#xff09;或者是.NET框架中自带的库。如果可以设置断点并在NuGet依赖项或框架本身上使用调试器的所有功能&#xff0c;那么我们的源码调试体验和生产效率会得到大大的提升。今天我…

论文笔记:液体管道泄漏综合检测与定位模型

0 简介 An integrated detection and location model for leakages in liquid pipelines 1 摘要 许多液体&#xff0c;如水和油&#xff0c;都是通过管道运输的&#xff0c;在管道中可能发生泄漏&#xff0c;造成能源浪费、环境污染和对人类健康的威胁。本文描述了一种集成的…

探索编程迷宫:选择你的职业赛道

在现代科技的浪潮中&#xff0c;程序员的职业赛道就像是一座迷宫&#xff0c;充满着前端的美丽花园&#xff0c;后端的黑暗洞穴&#xff0c;以及数据科学的神秘密室。这个迷宫中&#xff0c;每一条通道都充满了挑战和机遇&#xff0c;而每一个行走其中的人都在寻找着属于自己的…

Day68:WEB攻防-Java安全原生反序列化SpringBoot攻防heapdump提取CVE

目录 Java安全-反序列化-原生序列化类函数 原生序列化类函数 SnakeYaml XMLDecoder ObjectInputStream.readObject 工具利用 ysoserial Yakit SerializedPayloadGenerator Java安全-SpringBoot框架-泄漏&CVE SpringBoot Actuator-黑白盒发现 人工识别 BurpSui…

强缓存和协商缓存

前言 计算机网络模型从底到上&#xff1a;物理层&#xff08;光纤、网线&#xff09;、链路层&#xff08;MAC地址&#xff09;、网络层&#xff08;IP协议&#xff09;、传输层&#xff08;TCP\UDP&#xff09;、应用层&#xff08;HTTP\FTP\DNS&#xff09;。HTTP协议是作用…

基于深度学习YOLOv8+Pyqt5的工地安全帽头盔佩戴检测识别系统(源码+跑通说明文件)

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;318安全帽 获取完整源码源文件7000张已标注的数据集训练好的模型配置说明文件 可有偿59yuan一对一远程操作配置环境跑通程序 效果展示&#xff08;图片检测批量检测视频检测摄像头检测&#xff09; 基于深度学习YOLOv8Pyqt…

TCP - 传输控制协议

TCP - 传输控制协议 是一种面向连接的可靠传输协议。 特点&#xff1a; TCP是面向连接&#xff08;虚连接&#xff09;的传输层协议。 每一条TCP连接有且只能有两个端点。 可靠、有序、无丢弃和不重复。 TCP协议提供全双工通讯。 发送缓存 存放发送方TCP准备发送的数据。T…

Java基础经典10道题

目录 for循环的嵌套 题目一: 求101到200之间的素数的个数,并打印 代码分析: 注意点: 题目二:开发验证码 代码分析: 题目三:数组元素的复制 代码分析: 题目四:评委打分 健壮版代码: 代码分析:看源码 注意点: 题目五:数字加密 优化版代码: 代码分析: 题目六:数字…

Python Web开发记录 Day13:Django part7 Ajax入门与案例(任务管理)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、Ajax入门①简介②工作原理③优点④缺点⑤使用…

婚恋交友系统开发-PHP书写-uniAPP开发-安装环境7.3-数据库5.6-源码交付-支持二开!

一、确定用户需求 在开发婚恋交友小程序之前&#xff0c;我们需要先确定用户的需求。不同的用户群体对于婚恋交友的需求是不同的&#xff0c;因此我们需要针对不同的用户群体进行调研和分析。 例如&#xff0c;有些用户可能更注重交友的乐趣和体验&#xff0c;而有些用户则更注…

django管理日志记录(日志审计django_admin_log)

环境 django 4.1 用途 django_admin_log 表主要用于以下几个方面&#xff1a; 审计日志: 可以用来记录管理界面的所有操作&#xff0c;以便审计管理员的操作。 故障排除: 可以用来诊断和排除管理界面相关的问题。 数据恢复: 可以用来恢复意外删除的数据。 from django.con…

WMware安装ghost镜像

0.装机工具镜像生成参考 下载安装WePE类似软件 点击导出iso镜像 生成后即可使用&#xff0c;此类装机镜像可用作CD-ROM启动时使用 实体机刻盘启动&#xff0c;虚拟机设置启动CD-ROM路径使用 1.新建虚拟机 2.一直下一步到完成界面 3.点击完成后&#xff0c;编辑虚拟机设置 …

Stable Diffusion WebUI 生成参数:采样器(Sampling method)和采样步数(Sampling steps)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文将深入探讨Stable Diffusion WebUI生成参数中的采样器和采样步数&#xff0c;旨在为读者呈现一个全面而细致的解析。我们将从采样器和采样步数的概念出发&…

【解读】NIST网络安全框架CSF 2.0

2014年&#xff0c;NIST&#xff08;美国国家标准与技术研究所&#xff0c;类似于中国的工信部&#xff09;首次发布了网络安全框架CSF&#xff08;Cybersecurity Framework)&#xff0c;十年后&#xff0c;在2024年2月26日发布了重大更新&#xff08;CSF 2.0&#xff09;&…

idea+vim+pycharm的块选择快捷键

平时开发的时候&#xff0c;有的时候我们想用矩形框住代码&#xff0c;或者想在某列上插入相同字符 例如下图所示&#xff0c;我想在22-24行的前面插入0000 1. Idea的快捷键&#xff1a;option 鼠标 2. Pycharm的快捷键&#xff1a;shift option 鼠标 2. Vim 块选择 v/V/c…
最新文章