前端H5移动端点击按钮复制邀请码。
20180601160916210.png
使用开源项目 clipboard.js，
官网：点击打开链接
可以通过script标签引入
也可以通过npm安装，npm install clipboard.js --save-dev。
(注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者textarea作为中间过渡。html中写一个textarea标签，样式设置： opacity:0; z-index=-1;这样就可使隐藏这个没用的容器。)
下面贴代码：
<div class="code-box">
<p class="code-num" id="codeNum">AE86123456</p>
<textarea id="input"></textarea>
<p class="code-btn copy" id="codeBtn" data-clipboard-target="#input">复制邀请码</p>
</div>
js代码：
$(".code-btn").click(function(){
let e = document.getElementById("codeNum").innerText;
let t = document.getElementById("input");
t.value = e;
//实例化clipboard
var clipboard = new ClipboardJS('#codeBtn');
clipboard.on("success", function(e){
$(".alertMsg").html("复制成功！");
$(".modal-bg").css("display", "block");
e.clearSelection();
});
clipboard.on("error", function(e){
$(".alertMsg").html("请选择“拷贝”进行复制!");
$(".modal-bg").css("display", "block");
});
});
第二种方法:
<span id="codeNum">FTYHDSDW</span>
<span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span>
js
<script type="text/javascript">
function copyArticle(event) {
const range = document.createRange();
range.selectNode(document.getElementById('codeNum'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功！");
}
document.getElementById('codeBtn').addEventListener('click', copyArticle, false);
</script>
