js复制内容到剪贴板实现复制粘贴功能_js 复制粘贴功能实现-程序员宅基地

技术标签: JavaScript  javascript  

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);
  };
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_52191385/article/details/136614730

智能推荐

linux 设备树(.dts)实战解析_serial2 dts-程序员宅基地

文章浏览阅读1w次,点赞24次,收藏109次。文章目录前言设备树DTS语法内容标准属性向节点追加或修改内容设备树在目录中的体现Linux 内核解析 DTB 文件帮助文档信息设备树节点的操作函数1、查找节点的 of 函数2、查找父/子节点的 OF 函数3、提取属性值的 OF 函数前言在linux2.6中,ARM架构的板级硬件细节过多的被编码在arch/arm/plat-xxx和arch/arm/mach-xxx充斥着大量的板级信息,这些细节对应内核来说不过是垃圾。设备树设备树是一种描述硬件的数据结构,它起源于OpenFirmware。采用设备树后_serial2 dts

ethereal软件安装详解_etherealcsdn下载-程序员宅基地

文章浏览阅读6k次,点赞10次,收藏19次。首先得先安装winpcap3.1下载地址:WinPcap · Download然后安装:安装ethereal软件:地址:链接:https://pan.baidu.com/s/1nj5GEl1cKJxtqrcdkE-Iqw提取码:ut64复制这段内容后打开百度网盘手机App,操作更方便哦..._etherealcsdn下载

android自定义dialog不显示,有关问题解决之Android自定义Dialog无法dismiss-程序员宅基地

文章浏览阅读1.7k次。问题解决之Android自定义Dialog无法dismiss场景:点击ListView的一个Item,弹出自定义Dialog。在初始化Dialog时,将一个OnClickListener作为参数传递给Dialog。点击布局中设置的Button可以dismiss。问题:Dialog布局中的两个Button设置了监听但事件没有触发到。分析:1、Button确实添加了OnClickListener事件,..._kotlin 自定义dialog 不显示

走马灯 (滚动字幕效果)_layui 文字滚动效果-程序员宅基地

文章浏览阅读9.7k次。1. 走马灯UI控制脚本using UnityEngine;using System.Collections;using System.Collections.Generic;using CommonEnum;using PBClientClass;using System;public class UISystemTips : UIPanelBase { int _Max_layui 文字滚动效果

JavaScript对象详解,深入理解js对象_js撖寡情-程序员宅基地

文章浏览阅读2.9k次,点赞4次,收藏11次。定义:对象是JavaScript的基本数据类型。对象也是一种复合值:可以通过名字访问这些值,我们可以将对象看做是从字符串到值的映射,当然对象不仅仅是字符串到值的映射,除了自有的属性还可以从原型继承属性。创建对象:1.字面量方式 var empty={} //创建一个空对象 var obj={a:1,b:2};//两个属性的对象 var compObj={a:'1',b:'2',cc:{ d:'3', e:'4' } }; //复杂的对象._js撖寡情

#力扣LeetCode1984. 学生分数的最小差值 @FDDLC_力扣1984-程序员宅基地

文章浏览阅读145次。题目描述:1984. 学生分数的最小差值 - 力扣(LeetCode) (leetcode-cn.com)Java代码:class Solution { public int minimumDifference(int[] a, int k) { int ans=Integer.MAX_VALUE; Arrays.sort(a); for(int i=a.length-k;i>=0;i--){ ans=M_力扣1984

随便推点

VsCode单步调试 和 终端加载npy文件(报错要注意文件路径中是否含中文)_vue显示npy文件-程序员宅基地

文章浏览阅读1.5k次。VsCode单步调试 和 终端加载npy文件VsCode单步调试终端加载npy文件VsCode单步调试打开一个py文件,在vscode界面,按F5,会跳转到调试界面终端加载npy文件在vscode终端跑完整体文件,然后在终端:首先输入python,回车输入 import numpy as np,回车打开文件,必须加载文件所在位置,注意把路径的斜杠\改成python的/,并且路径需要检查是否有引号括起来,不然报错,feature = np.load(“E:/0607yan/0622 mach_vue显示npy文件

Windows Opencl clEnqueueReadBuffer()与clEnqueueWriteBuffer()函数-程序员宅基地

文章浏览阅读4.4k次。Windows Opencl clEnqueueReadBuffer()与clEnqueueWriteBuffer()函数详细解析Reading, Writing and Copying Buffer Objects以下函数将命令从缓冲区对象读入主机内存或从主机内存写入缓冲区对象。clEnqueueReadBuffer函数原型cl_int clEnqueueReadBuffer(cl_command_queue command_queue, cl_mem_clenqueuewritebuffer

[mmu/cache]-MMU的寄存器学习_par_el1-程序员宅基地

文章浏览阅读2.2k次。文章目录1、PAR_EL1, Physical Address Register1、PAR_EL1, Physical Address Register寄存器:寄存器读写:MRS <Xt>, PAR_EL1MSR PAR_EL1, <Xt>SH : Shareability attribute, for the returned output address. Permitted values are:0b00 Non-shareable.0b10 Outer S_par_el1

美国旅游签证归来(上海领馆)_上海领事馆雨伞寄存-程序员宅基地

文章浏览阅读2.5k次。几个小TIPS:1、到了梅龙镇广场后,要在奉贤路外面排队。连棵树都没有,晒死了,不知道下雨怎么办,还不让带伞的。我觉得一个可行流程是先排队领了入馆卡,然后去寄存,接着回来拿着入馆卡直接进去。2、说到寄存,我还是犯了错误,电子手环没有摘下来,水杯也忘记存了,不必要的损失。好在都是用了两年以上的老物,到了更新换代的时候(自我安慰一下)。总之所有电子产品都得记得寄存哦,周边很多寄存点,二十块钱的样子。3..._上海领事馆雨伞寄存

Unsupported Java. Your build is currently configured to use Java 17.0.6 and Gradle 6.8.3.-程序员宅基地

文章浏览阅读2.2w次,点赞48次,收藏76次。关键是知道发生了啥,精准的结果,然后才能知道可能的解决方案。_unsupported java. your build is currently configured to use java 17.0.6 and

毕业设计:基于深度学习的黑夜人脸识别算法系统_人脸识别算法csdn-程序员宅基地

文章浏览阅读857次,点赞9次,收藏18次。毕业设计:基于深度学习的黑夜人脸识别算法系统解决传统算法在光线不足条件下识别性能下降的问题。构建专门的黑夜人脸数据集,并利用深度学习技术进行模型训练和优化,该系统能够在低光照环境下实现高效、准确的人脸识别。为计算机毕业设计提供了一个创新的方向,结合了深度学习和计算机视觉技术,为毕业生提供了一个有意义的研究课题。对于计算机专业、软件工程专业、人工智能专业、大数据专业的毕业生而言,提供了一个具有挑战性和创新性的研究课题。无论您对深度学习技术、机器学习、算法或人工智能的领域的同学,能为您提供灵感和指导。_人脸识别算法csdn