clipboard.js的初步用法-将网页文本复制到剪贴板

最新推荐文章于 2024-07-22 19:37:58 发布

wkj001

最新推荐文章于 2024-07-22 19:37:58 发布

阅读量565

点赞数 1

分类专栏： javascript 文章标签： clipboard.js

javascript 专栏收录该内容

96 篇文章 1 订阅

订阅专栏

简单讲一下单个选择器下的复制和多个选择器下的复制，文件不到4kb，文末下载。

单个选择器下的复制

1.首先引入你下载的clipboard.min.js文件

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

2.举个例子，你要复制的是下面pre标签里的内容，那你可以从另一个元素例如我写的button来复制它

<pre class="pre">94152</pre>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".pre">Copy</button>

这里复制按钮必须加上data-clipboard-action="copy" data-clipboard-target=".pre"这两个data属性，

copy改为cut即为剪切，红色部分的.pre可以是class或者id也可以是标签名

3.之后你实例化构造函数

var clipboard = new ClipboardJS('.btn');

这里把它存进clipboard是为了第四步

4.就是在操作成功或者失败时的行为，直接看代码了

clipboard.on('success', function(e) {
console.log(e);//复制成功后的行为
});
clipboard.on('error', function(e) {
console.log(e);//复制失败后的行为
});

完整demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单个选择器下的复制</title>
</head>
<body>
<div>hello</div>
<pre class="pre">94152</pre>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".pre">Copy</button>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);//复制成功后的行为
});
clipboard.on('error', function(e) {
console.log(e);//复制失败后的行为
});
</script>
</body>
</html>

多个选择器下的复制

这个就不说过程了，我这只讲了两种方案，想学更多直接去官网看一下吧，戳这里：https://clipboardjs.com/#example-target

多个选择器下的复制完整demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个选择器下的复制</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<pre class="prettyprint" data-clipboard-text="1"></pre>
<pre class="prettyprint"></pre>
<pre class="prettyprint"></pre>
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>

下载地址：

文件名称：clipboard.js

文件大小：3.4k

适用版本：

更新日期：2019-2-18

点击下载

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。