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>