Fork me on GitHub

原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)

在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。
在网上看到有很多该功能的实现代码,除了插件clipboard.js、ZeroClipboar兼容性较好以外,其他大部分在safari,ios上的微信端这些并不兼容。那么在不使用插件的情况下,为大家整理了一份较为兼容的实现方式:纯js实现复制文本并提示复制成功(干货)适用所有浏览器,直接放项目就能用。 

代码如下:

<a onclick="copyTxt('这是要复制的内容哦')">点击复制</a>

js:

<script>
//原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
function copyTxt(text){
	if(typeof document.execCommand!=="function"){
		alert("复制失败,请长按复制");
		return;
	}
	var dom = document.createElement("textarea");
	dom.value = text;
	dom.setAttribute('style', 'display: block;width: 1px;height: 1px;');
	document.body.appendChild(dom);
	dom.select();
	var result = document.execCommand('copy');
	document.body.removeChild(dom);
	if (result) {
		alert("复制成功");
		return;
	}
	if(typeof document.createRange!=="function"){
		alert("复制失败,请长按复制");
		return;
	}
	var range = document.createRange();
	var div=document.createElement('div');
	div.innerHTML=text;
	div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;');
	document.body.appendChild(div);
	range.selectNode(div);
	const selection = window.getSelection();
	if (selection.rangeCount > 0){
		selection.removeAllRanges();
	}
	selection.addRange(range);
	document.execCommand('copy');
	alert("复制成功")
}
</script>
posted @ 2020-06-04 16:07  秋楓  阅读(2129)  评论(0编辑  收藏  举报