Layabox web 复制一段文字到剪贴板

wu语

发布h5版本，在微信浏览器上实现复制一段文字到剪贴板
layabox ts版本
实现方法详细步骤(本人没做过web开发，小白一个)

function copyText(str) {
//实现...
}

王壮壮

/** 复制文本
     *  @param str 需要复制的内容
     *  @param isAlertMsgId 需要弹出提示的信息ID,23为复制成功
     *  @param isAlertMsgInfo 需要提示的具体内容
     *  */
    public static copy(str: string ,isAlertMsgId?:number ,isAlertMsgInfo?:string): boolean{
        let re: boolean;
        try {
            let input = document.createElement("input");
            input.value = str;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, input.value.length),
                document.execCommand('Copy');
            document.body.removeChild(input);
            let msg: string = isAlertMsgInfo;
            re = true;
        } catch (e) {
            console.error("Current equipment support Copy!");
        }
        return re;
    }

王壮壮

王壮壮或者引入wx的js 文件调用剪贴板 wx.getClipboardData(Object object)

wu语

王壮壮你这个代码放到layabox，chrome测试都不过啊，手机微信浏览器也不行，返回的是true，但是没复制到东西

熊猫大侠

inputDiv = Browser.document.createElement("input");  
inputDiv.type = "button";
inputDiv.id = "btn";
inputDiv.className = "btn";
inputDiv.value = "复制按钮";
inputDiv.style.width="138px";
inputDiv.style.height="50px";
inputDiv.style.opacity = "0";
inputDiv.style.filter = "alpha(opacity=0);";

inputDiv.setAttribute("data-clipboard-text","我是被复制的内容啊");

inputDiv.style.position ="absolute";
inputDiv.style.top = “0px";
inputDiv.style.left = “0px";
Browser.container.appendChild(inputDiv);
 
var btnElem:* = Browser.document.getElementById('btn');
var clipboard:* = __JS__("new ClipboardJS(btnElem)");

//可以自己加些处理

clipboard.on('success', function(e):* {
rightClickBox.visible = false;
if(inputDiv && inputDiv.parentNode)
{
Browser.container.removeChild(inputDiv);
}
});
clipboard.on('error', function(e):* {
});把这个按钮放在自己的复制按钮之上 自己去算自己的位置 电脑浏览器是可以复制粘贴的 手机浏览器没试过

wu语

熊猫大侠 var btnElem:* = Browser.document.getElementById('btn'); 这是什么写法，为什么有 *

熊猫大侠

熊猫大侠 @wu语:我这边as的写法表示任意类型因为返回的不是我这边对应的类型

熊猫大侠

熊猫大侠 @wu语:还有去下一个clipboard.min.js引用进去

wu语

熊猫大侠还是不行，我之前也试过用clipboard,但是在微信那里没起效果，不能说完全不起，偶尔行

wu语

问题解决了，在网上找了个自定义弹窗的东西，弹窗的时候，用确定按钮做复制，自定义弹窗参考：https://blog.csdn.net/qq_27437967/article/details/70858262

复制到剪贴板代码如下：（窗口有点难看...）

function copyText(str) {
new ShowDiv(str);
} 
function ShowDiv(str) { 
var _this = this; 
this.AppConfirm = document.getElementById("AppConfirm");
if (this.AppConfirm == null) {
this.AppConfirm = document.createElement("div");
document.body.appendChild(this.AppConfirm);
this.AppConfirm.id = "AppConfirm";
} 
this.modlueDiv = document.getElementById("modlue");
if (this.modlueDiv == null) {
this.modlueDiv = document.createElement("div");
this.AppConfirm.appendChild(this.modlueDiv);
this.modlueDiv.id = "modlue";
} 
this.MyContent = document.getElementById("MyContent");
if (this.MyContent == null) {
this.MyContent = document.createElement("div");
this.MyContent.id = "MyContent";
this.MyContent.className = "MyContent";
this.modlueDiv.appendChild(this.MyContent);
this.MyContent.innerText = "复制成功";
} 
this.MyBtn = document.getElementById("MyBtn");
if (this.MyBtn == null) {
this.MyBtn = document.createElement("div");
this.MyBtn.id = "MyBtn";
this.MyBtn.className = "MyBtn";
this.modlueDiv.appendChild(this.MyBtn);
} 
this.confirmBtn = document.getElementById("confirm");
if (this.confirmBtn == null) {
this.confirmBtn = document.createElement("button");
this.confirmBtn.id = "confirm";
this.confirmBtn.innerText = "确定"
this.MyBtn.appendChild(this.confirmBtn);
}
this.newMask = document.createElement("div"); 
this.modlueDiv.style.visibility = "visible"; 
var clipboard = new ClipboardJS("#confirm", {
text: function () {
return str;
}

})

clipboard.on("success", function (e) {
console.log("ok:")
console.log(e)
clipboard.destroy();

})

clipboard.on("error", function (e) {
console.log("err:")
console.log(e)
clipboard.destroy();

})

//确认按钮
this.confirmBtn.onclick = function () {
_this.CloseDivAndInfoMesg(this);
}

// 创建弹出层遮罩层等

if (!document.getElementById("mask") && 1) {
//mask div 
this.newMask.id = "mask";
this.newMask.style.position = "absolute";
this.newMask.style.zIndex = "1";
this.newMask.style.width = "100%";
this.newMask.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) + 100 + "px";
this.newMask.style.top = "0px";
this.newMask.style.left = "0px";
this.newMask.style.background = "gray";
this.newMask.style.filter = "alpha(opacity=80)";
this.newMask.style.opacity = "0.5";
document.body.appendChild(this.newMask);
}
_this.mask = document.getElementById("mask");
_this.mask.style.visibility = "visible";
}

//点击取消按钮关闭模态框

ShowDiv.prototype.CloseDiv = function () { 
this.modlueDiv.style.visibility = "hidden";
this.mask.style.visibility = "hidden";
}

//点击确认按钮关闭模态框，提示增加信息

ShowDiv.prototype.CloseDivAndInfoMesg = function () {
this.CloseDiv();
}

wu语

wu语还要在index.html里面加上css样式

    *{margin:0px;padding:0px;}
    body{height:1000px;}
    <!--#AppConfirm{position:relative;margin:0 auto;}-->
    #modlue{
    position:fixed;left:50%;top:50%;width:400px;height:260px;  margin-left:-200px;margin-top:-150px;
    visibility:hidden;background-color:#fff;z-index:100;border:1px solid grey;overflow: hidden;}
    .MyContent{position:fixed;left:50%;top:50%;}
    .MyBtn{width:100%;height:18%;background-color:white;}
    #confirm{position:fixed;left:49%;top:53%;font-size:30px;color:black;font-weight:bold;margin-right:6%;background-color:white;}
    </style>

wu语

熊猫大侠

var clipboard = new ClipboardJS(document.body, {
            text: function() {
                return "复制的内容"
            }
        });

这种写法，在chrorme没有问题，但是在微信浏览器，就偶尔可以，多数是不行的

熊猫大侠

熊猫大侠 @wu语:偶尔可以的话说明方法是能用的自己在研究研究吧有可能是按钮没有点击到我没在微信浏览器上试过

熊猫大侠

熊猫大侠 @wu语:你先不要隐藏这个网页按钮直接点击也不是每次都成功吗？

wu语

熊猫大侠

    <body>
        <button id="copy" onclick="copy('sdfafaddfa')">click</button>
    </body>

    <script src="https://static.runoob.com/assets/clipboard.min.js"></script>

    <script>
        function copy(str) {
            var clipboard = new Clipboard("#copy", {
                text: function() {
                        return str;
                }
            })

            clipboard.on("success", function(e) {
                console.log("ok:")
                console.log(e)
                clipboard.destroy();
                alert("ok")
            })
            clipboard.on("error", function(e) {
                console.log("err:")
                console.log(e)
                clipboard.destroy();
            })
        }
    </script>

这样的写法如果是单单一个网页，在微信浏览器也没问题，但是把它写到laya里，用到微信浏览器，就偶尔行，在chrome也没问题，每次都可以。真是日了狗了

wu语

熊猫大侠 @熊猫大侠:不隐藏，在微信浏览器也不是每次都能用的，也是偶尔能用，感觉像买彩票一样

熊猫大侠

熊猫大侠 @wu语:那只能你自己在研究研究了研究出来请记得告诉我一下说不定以后也会遇到

wu语

熊猫大侠 @熊猫大侠:已解决

熊猫大侠

熊猫大侠 @wu语:怎么弄得换方法了？

wu语

熊猫大侠 @熊猫大侠:上面有答案