js复制内容到剪贴板，实现：复制 粘贴

js复制内容到剪贴板，实现：复制 粘贴

第一种方法，用到 clipboard.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>

js代码：

  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

document.execCommand MDN文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
MDN

情况一：可编辑的标签(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);
  };

结束

如果解决了你的问题，可以给博主点赞支持一下