工学1号馆

home

clipboard.js实现复制链接功能

Wu Yudong    December 31, 2020     HTML5+CSS3   18   

现有的常用方案有两种:
一:使用原生javascript中window.clipboardData实现复制到剪贴板功能;
二:使用Zero Clipboard库;

方案一仅支持ie浏览器,在firefox,chrome浏览器上则不起作用。

方案二ZeroClipboard是一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的,所以只支持安装了flash的浏览器。在现代浏览器中,flash逐渐没落,firefox浏览器默认不开启flash,所以Zero Clipboard在兼容方面也表现不佳。

那么,对于复制到剪切板这种简单的操作有没有一种实现简单,兼容性良好的解决方案呢?
有的!那就是github上的开源项目clipboard.js,它不需要依靠flash以及其他框架(但不支持IE8及以下浏览器)。下面举例使用clipboard实现复制当前元素链接功能:

首先下载clipboard库,地址如下:

http://www.clipboardjs.cn/

引入js库

<script src=".../clipboard/clipboard.min.js"></script>

具体实现代码如下:

$('.item.copy').click(function () {
	var _val = document.location.href;
	var clipboard = new ClipboardJS('.item.copy', {
		text: function() {
			layer.msg('复制成功!');
			return _val;
		}
	});
});

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)