clipboard target 自定义复制对象

便捷教程网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard target例子</title>
    <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="msg"></div>
    
    <div id="op">需要被复制的内容</div>
    
    <input id="btn1" type="button" onclick="copy()" value="复制内容1">
    <script>
        //自定义复制函数  
        function copy() {
            var clipboard = new ClipboardJS('#btn1', {
                target: function (trigger) {
                    //需要被复制内容的Dom元素对象
                    return document.getElementById("op");
                }
            });

clipboard.on('success', function (e) {
                e.clearSelection();
                document.getElementById("msg").innerHTML = "复制成功";
            });

clipboard.on('error', function (e) {
                document.getElementById("msg").innerHTML = "复制失败";
            });
        }
    </script>
</body>

</html>

运行结果如下：结果如下：尺寸：