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 @   秋楓  阅读(2317)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
历史上的今天:
2017-06-04 写在前面
点击右上角即可分享
微信分享提示