前端H5移動(dòng)端點(diǎn)擊按鈕復(fù)制邀請(qǐng)碼减拭。
20180601160916210.png
使用開(kāi)源項(xiàng)目 clipboard.js，
官網(wǎng)：點(diǎn)擊打開(kāi)鏈接
可以通過(guò)script標(biāo)簽引入
也可以通過(guò)npm安裝区丑，npm install clipboard.js --save-dev拧粪。
(注:這個(gè)插件復(fù)制的對(duì)象必須是input 或者 textarea 里面的值修陡。所以說(shuō)你要是想復(fù)制p標(biāo)簽或者其他文本 必須先設(shè)置一個(gè)input或者textarea作為中間過(guò)渡。html中寫一個(gè)textarea標(biāo)簽可霎，樣式設(shè)置： opacity:0; z-index=-1;這樣就可使隱藏這個(gè)沒(méi)用的容器魄鸦。)
下面貼代碼：
<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">復(fù)制邀請(qǐng)碼</p>
</div>
js代碼：
$(".code-btn").click(function(){
let e = document.getElementById("codeNum").innerText;
let t = document.getElementById("input");
t.value = e;
//實(shí)例化clipboard
var clipboard = new ClipboardJS('#codeBtn');
clipboard.on("success", function(e){
$(".alertMsg").html("復(fù)制成功！");
$(".modal-bg").css("display", "block");
e.clearSelection();
});
clipboard.on("error", function(e){
$(".alertMsg").html("請(qǐng)選擇“拷貝”進(jìn)行復(fù)制!");
$(".modal-bg").css("display", "block");
});
});
第二種方法:
<span id="codeNum">FTYHDSDW</span>
<span class=" code-btn" id="codeBtn" data-clipboard-target="#input">復(fù)制</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("復(fù)制成功癣朗！");
}
document.getElementById('codeBtn').addEventListener('click', copyArticle, false);
</script>
