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);
  };
  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值