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>