使用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>