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

时间:2022-07-09 21:24:02

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

插件名是Clipboard.js,该插件不依赖 Flash,而是依赖于最新HTML5推出 Selection APIexecCommand API

execCommand 支持以下浏览器:Chrome浏览器42+,火狐41+,IE9+。Safari目前仍不支持cutcopy指令。

安装

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 基于 SelectionexecCommand APIs . 第二个API仅被下面浏览器支持:

纯js实现复制到剪贴板功能 纯js实现复制到剪贴板功能 纯js实现复制到剪贴板功能 纯js实现复制到剪贴板功能 纯js实现复制到剪贴板功能
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('复制成功');
});
});

推荐阅读

1、clipboard.js中文网 — 纯JS实现复制文本到剪切板,无需Flash,轻量级JavaScript库

http://me.52fhy.com/doc/clipboardjs/

2、clipboard.js — Copy to clipboard without Flash

https://clipboardjs.com/