移动端php按钮复制文字,JS复制文本到粘贴板，前端H5移动端点击按钮复制文本...

前端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;这样就可使隐藏这个没用的容器。)

下面贴代码：

AE86123456

复制邀请码

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");

});

});

第二种方法:

FTYHDSDW

复制

js

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);