clipboard.js 实现动态获取内容并复制到剪切板

使用clipboard.js分为以下几个步骤:

1.引入一个clipboard.js的文件；

2.新建一个clipboard对象；

3.点击按钮获取目标对象里面的内容，将其复制到剪切板。

注意：1.目标对象不能display：none，隐藏之后无法复制，如果需要隐藏，可以设置opacity:0;

摸索一番之后，还是如愿实现了项目所需的功能，简单的demo如下：

 

<button class='bt btn btn-success btn-xs' data-clipboard-action='copy' data-clipboard-target='#deviceInfo'  data-param="uid"  id='copyInfo'>复制</button>

　　

<script>
var clipboard = new Clipboard('.bt',{

            target: function(e) {
                var param = $(e).data("param");
                getCopyData(param);
            return document.querySelector('#copyTarget'); //复制标签文本
            //return document.querySelector('input'); 复制文本框的值
        }
});

    clipboard.on('success', function(e) {
        alert('复制账号信息成功');
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    function getCopyData(param){
        var infodata = "" ;
            $.ajax({
                url:"getInfo",
                type:"get",
                data:{"uid":param},
                dataType:"json",
                async:false,
                success:function(res){
                    infodata = res.data;  /*获取需要复制的内容*/
                    $("#copyTarget").text(infodata);  /*放入目标对象*/
                },
                error:function(){
                    alert("请求错误！") ;
                }
            })

    }
</script>