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

纯js实现复制到剪贴板功能

2017-06-09 12:14 736 查看
在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。

插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand
API。

execCommand
 支持以下浏览器：Chrome浏览器42+，火狐41+，IE9+。Safari目前仍不支持
cut
和
copy
指令。


安装

Github：
https://github.com/zenorocha/clipboard.js

可以通过npm方式安装：
npm install clipboard --save


或者bower：
bower install clipboard --save


当然，也可以直接下载ZIP包：https://github.com/zenorocha/clipboard.js/archive/master.zip


开始使用

首先需要在页面引入：
<script src="dist/clipboard.min.js"></script>


示例

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>clipboard示例</title>
<script src="../dist/clipboard.min.js"></script>
</head>
<body>
<!--data-clipboard-text属性的值将会被复制-->
<div id="btn" class="js-copy" data-clipboard-text="我是被复制的内容啊">
<span>点击复制</span>
</div>

<script>
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);//实例化

//复制成功执行的回调，可选
clipboard.on('success', function(e) {
console.log(e);
});

//复制失败执行的回调，可选
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>


点击页面的
点击复制
就可以复制内容到剪切板了，
console.log(e)
可以打印出里面的内容：
Object {action: "copy", text: "我是被复制的内容啊", trigger: div#btn.js-copy}


用法


从属性里复制内容

Clipboard.js使用起来非常简单，默认会复制
data-clipboard-text
属性里的值，你可以把需要复制的文本放在里面。

上面我们使用
document.getElementById
获取对象，还可以：
//直接通过ID
var clipboard = new Clipboard('#btn');

//直接通过class
var clipboard = new Clipboard('.js-copy');

//直接通过标签也可以找到
var clipboard = new Clipboard('div');


对于多处需要用到复制功能的：
<div class="js-copy" data-clipboard-text="text1">
<div class="js-copy" data-clipboard-text="text2">
<div class="js-copy" data-clipboard-text="text3">


同样通过
class
查找：
//直接通过class
var clipboard = new Clipboard('.js-copy');


我们无需去设置点击事件。


从另外一个元素复制内容

示例：
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button>


上面的
data-clipboard-target="#bar"
属性定义了复制时将复制
id="bar"
的内容。

当然，也可以在JS里指定：
var clipboard = new Clipboard('.js-copy',{
target: function() {
return document.querySelector('#bar');
}
});


JS里指定复制的内容

<button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button>

<script>
var clipboard = new Clipboard('.js-copy', {
text: function() {
return '这里被复制的内容';
}
});
</script>


将直接复制
text
里指定的内容。


剪切功能(
cut
)

上面默认都实现了剪切功能。还可以指定是复制(
copy
)还是剪切(
cut
)。

在html里指定：
<button class="js-copy" data-clipboard-action="copy">复制</button>
<button class="js-copy" data-clipboard-action="cut">剪切</button>


通过
data-clipboard-action
属性指定。


高级选项

你可以设置回调方法供
Clipboard
使用：
new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});


这里的
target
接受一个回调函数。同样，
text
也支持接受一个回调函数。
new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});


清理
Clipboard
对象：
var clipboard = new Clipboard('.btn');
clipboard.destroy();


浏览器支持

Clipboard.js
 基于 Selection 和 execCommand
APIs . 第二个API仅被下面浏览器支持：
42+ ✔41+ ✔9+ ✔29+ ✔Nope ✘
Safari目前还不支持
execCommand
提供的
复制/剪切
操作，包括移动端。


其它

一般建议全局初始化
Clipboard
。全部使用相同的class，如
.js-clipboard
。
$(function(){
/*
* 复制到剪切板
* @see https://github.com/zenorocha/clipboard.js */
if(typeof Clipboard != 'function'){
return false; /*避免未引入Clipboard抛错*/
}

var clipboard = new Clipboard('.js-clipboard');
clipboard.on('success', function(e) {
alert('复制成功');
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航