您的位置：首页 > Web前端 > JavaScript

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

2017-10-25 15:08 676 查看

使用背景：

项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能，由于zeroClipboard.js依赖于Flash，而出于我所在公司的安全策略，大部分同事都没有办法下载更新后的Adobe Flash 插件并更新，所以解决原插件使用的bug需要另找方法。

经过一番查找，不利用Flash实现复制内容到剪切板还有另外两种方法：

一、使用原生js里面的window.clipboardData;

二、使用插件clipboard.js.

由于方法一仅支持IE, 对firefox，chrome支持并不友好，因此决定改用clipboard.js.

使用clipboard.js其实很简单，网上查找使用方法也非常方便，大体分为以下几个步骤:

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

2.新建一个clipboard对象；

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

简单的代码如下：

<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<textareaid="target">复制我里面的内容</textarea></br>
<buttonclass="btn"data-clipboard-action="copy"data-clipboard-target="#target">
点我复制
</button>
<scriptsrc="jquery.js"></script>
<scriptsrc="clipboard.js"></script>
<script>
var clipboard=new
Clipboard('.btn');

clipboard.on('success',function(e) {
console.log("内容已经复制到剪切板啦");

});
</script>
</body>
</html>

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

上面的方法可以直接复制目标对象里面的内容，可是如果需要复制的内容在点击的时候不存在，需要动态地获取怎么办呢？

在我实际开发的项目里面，需要复制的内容是需要即时获取的，相当于我所需要实现的功能分步骤拆解如下：

1.点击获取点击对象上挂载的参数；

2.传参，通过ajax动态获取需要复制的内容；

3.通过clipboard将内容复制到剪切板。

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

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button data-param="test"  id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button>

<div id="copyTarget" style="opacity: 0;"></div>  <!--隐藏目标对象-->

<script src="jquery.js"></script>
<script src="clipboard.js"></script>
<script>

new Clipboard('.btn', {
text: function(trigger) {
var param = $(trigger).data("param"); /*获取目标对象上挂载的参数test*/
getCopyData(param);
return trigger.getAttribute('aria-label');
}
});

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

</script>
</body>
</html>

就记录到这里。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航