js剪贴板插件 clipboard.js的使用
马清野
为了方便我们演示，我们使用官网上第三方CDN提供商的链接
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>
有项目使用到了这个功能，查找到了这个插件，在网上查找了很多资料，很多没有说到重点。经过自己的尝试和摸索最终搞定了这个插件。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clipboard的使用</title>
</head>
<body>
<div class="share-item copylink" id="copyLink"></div>
</body>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>
<script>
(function () {
var clipboard = new ClipboardJS('#copylink', {
// 复制指定的文本内容
text: function () {
return window.location.href;
}
});
clipboard.on('success', function (e) {
//复制成功后的回调
console.log(e.text);
});
clipboard.on('error', function (e) {
//复制失败后的回调
console.log(e);
});
})()
</script>
</html>
使用的时候需要特别注意：
- 2.x版本实例化的时候要new ClipboardJS() ；之前的版本是new Clipboard（）
更多使用方式等有空了继续探索。
类似资料：