Clipboard.js 动态复制内容的方法
clipboard.js的使用很简单，也支持很多浏览器，不依赖flash即可复制，还可自定义复制事件，非常方便，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(['clipboard.min'], function() {
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
use(['bfwtoast', "bfwtoast"], function() {
$.toast("复制成功", 2000);
});
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
use(['bfwtoast', "bfwtoast"], function() {
$.toast("复制失败", 2000);
});
});
});
});
</script>
</head>
<body>
<button data-param="test" id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button>
<div id="copyTarget">
BFW.WIKI
</div>
<!--隐藏目标对象-->
</body>
</html>但是项目中需要动态更改复制内容，不是固定的，怎么办呢，其实clipboard.js，支持text监听劫持，在复制之前将target中的内容改掉就ok了，这样就实现了动态复制对象和内容的功能了，示例如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["clipboard"], function() {
new Clipboard('.btn', {
text: function(trigger) {
var param = $(trigger).data("param"); /*获取目标对象上挂载的参数test*/
$("#copyTarget").html("bfw.wiki");
return trigger.getAttribute('aria-label');
}
});
});
});
</script>
</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>
<!--隐藏目标对象-->
</body>
</html>
{{collectdata}}
网友评论0