HTML5复制基本方案————Clipboard.js

官网地址：https://clipboardjs.com/

兼容性

安装

使用npm安装

npm install clipboard --save

或者，下载文件，https://github.com/zenorocha/clipboard.js/archive/master.zip

开始

首先，引入dist目录下的脚本文件，或者第三方CDN

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

使用

基本参数：
ClipboardJS.isSupported()：判断是否支持该插件，返回"true"或"false"
data-clipboard-action：复制的类型，"copy"或"cut"
data-clipboard-target: 需要复制的文本（DOM选择器）class或id
new ClipboardJS('') : 复制内容的点击按钮（DOM选择器）class或id
onclick="" : 兼容ios

方案一

<div class="footer" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyText" onclick="">

点击复制

<span id="copyText">ddfdfdf</span>

</div>

var clipboard = new ClipboardJS('#copyBtn');

clipboard.on('success', function (e) {

console.log(e);

//复制成功函数

});

clipboard.on('error', function (e) {

console.log(e);

//复制失败函数

});

// copyText设置定位，opacity

方案二

<div class="footer" id="copyBtn" >

立即报名

<span id="copyText">ddfdfdf</span>

</div>

var clipboard = new ClipboardJS('#copyBtn', {

// 通过target指定要复印的节点

target: function () {

return document.querySelector('#copyText');

}

});

clipboard.on('success', function (e) {

console.log(e);

//复制成功函数

});

clipboard.on('error', function (e) {

console.log(e);

//复制失败函数

});

方案三

<div class="footer" id="copyBtn" ></div>
 
var clipboard = new ClipboardJS('#copyBtn', {
 // 点击copy按钮，直接通过text直接返回复印的内容
 text: function () {
 return '需要复制的文字';
 },
 action: function () {
 return "copy"
 }
});
clipboard.on('success', function (e) {
 console.log(e);
 //复制成功函数
});
clipboard.on('error', function (e) {
 console.log(e);
 //复制失败函数
}); 

方案四

<div class="footer" id="copyBtn" data-clipboard-text="复制文本">
 点击复制 
</div>
var clipboard = new ClipboardJS('#copyBtn', {});
clipboard.on('success', function (e) {
 // console.log(e)
 alert("复制成功");
});

终极方案（推荐）

只需要在需要复制文本设置class为copyText

需要点击复制的按钮设置class为coptBtn

操作HTML少，可以批量设置

//需要引入jq
var copyText= document.getElementsByClassName("copyText")[0].innerHTML;
 //获取需要复制的文本
$(".copyBtn").attr("data-clipboard-text", copyText);
var clipboard = new ClipboardJS(".copyBtn");
clipboard.on('success', function (e) {
 //复制成功函数
});
clipboard.on('error', function (e) {
 //复制失败函数
});

原生复制

 document.getElementById("copyBtn").addEventListener("click", function () {
 var range = document.createRange();
 var Url2 = document.getElementById("copyText");
 range.selectNodeContents(Url2);
 var selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range)
 document.execCommand("Copy"); // 执行浏览器复制命令
 alert("已复制好，可贴粘。");
})