原生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>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6854