使用背景:
项目组新重构的项目里面有利用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>
就记录到这里。