現(xiàn)有的常用方案有兩種：
一：使用原生javascript中window.clipboardData實現(xiàn)復(fù)制到剪貼板功能；
二：使用Zero Clipboard庫；
- 方案一僅支持ie瀏覽器，在firefox,chrome瀏覽器上則不起作用。
- 方案二ZeroClipboard是一個用于剪貼板復(fù)制的 JS 插件，它是基于 Flash 來實現(xiàn)跨瀏覽器的復(fù)制功能的，所以只支持安裝了flash的瀏覽器。在現(xiàn)代瀏覽器中，flash逐漸沒落，firefox瀏覽器默認(rèn)不開啟flash，所以Zero Clipboard在兼容方面也表現(xiàn)不佳。
- 那么，對于復(fù)制到剪切板這種簡單的操作有沒有一種實現(xiàn)簡單，兼容性良好的解決方案呢？
有的！那就是github上的開源項目clipboard.js，它不需要依靠flash以及其他框架（但不支持IE8及以下瀏覽器）。下面舉例使用clipboard實現(xiàn)復(fù)制當(dāng)前元素鏈接功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
</head>
<body>
<!-- 1. Define some markup -->
<button id="copyUrl" data-clipboard-target="#copyUrl" data-clipboard-action="copy" onClick="copyUrl()" class="btn btn-white btn-xs">復(fù)制鏈接</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
function copyUrl(){
var layer = layui.layer;
var _val=document.location.href;
console.log(document.location.href);
var clipboard = new ClipboardJS('#copyUrl', {
text: function() {
layer.alert('復(fù)制成功！', {icon: 1});
return _val;
}
});
}
</script>
</body>
</html>
- 我們只需下面四步：
1.引入clipboard.min.js文件；
2.選擇一個可以確定被拷貝元素的選擇器，本例中使用用的是基本的標(biāo)簽選擇器<div>，當(dāng)然也可以使用id選擇器 class選擇器等等；
3.定義一個button按鈕，注意按鈕的屬性：
data-clipboard-action="copy" data-clipboard-target="div"
其中data-clipboard-target屬性就是第二步你定義的選擇器
4.書寫js,建立clipboard對象以及復(fù)制后執(zhí)行的方法。
OK,這樣功能就完成了，點擊按鈕后就會發(fā)現(xiàn)div的內(nèi)容已經(jīng)拷貝到剪切板了。
注意：使用中var clipboard = new Clipboard('#copyUrl');出現(xiàn)了錯誤提示Uncaught ReferenceError: Clipboard is not defined，原因為Clipboard2.0版本應(yīng)使用var clipboard=new ClipboardJS('#copyUrl');
- 解決Clipboard.js點擊兩次才能復(fù)制成功的問題
點擊函數(shù)里手動增加一次點擊，代碼如下：
function copyUrl(){
layui.use('layer', function () {
var layer = layui.layer;
var clipboard = new ClipboardJS('#copyUrl', {
text: function() {
return window.location.href;
}
});
clipboard.on("success", function(e) {
console.log("ok");
layer.msg("復(fù)制成功",{icon:1, time: 1000});
clipboard.destroy();
});
clipboard.on("error", function(e) {
console.log("fail");
});
document.getElementById('copyUrl').click(); //解決clipboard二次點擊生效問題
clipboard.destroy();
});
}
