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

    选择打赏方式

微信公众号伊伊兔Yi-Yi-Tu,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

突然想给博客的文章代码段加有个复制功能,想到clipboard.js了这个东西,

奈何emlog的编辑器插入的pre的那部分代码我实在是找不到,

又不想全局的用js遍历所有button,获取所有选择器匹配到的元素,并为每一个选择器设置监听事件,

如果这样做,仔细想想,如果有成百上千个匹配到的元素,这样做会耗费大量内存。

虽然我并没有那么多btn,但这么不严谨的操作我才不干= =,索性不改了,原来这样就挺好的。

也把这个东西的简单用法分享一下,毕竟官网是英文的看起来比较累..

========================

简单讲一下单个选择器下的复制和多个选择器下的复制,文件不到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的初步用法-将网页文本复制到剪贴板 https://www.zcjun.com/learn/362.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心

已有1条吐槽

_yiyuan

2019-06-13 15:43 广东省深圳市宝安区 电信
不错
 Windows 10 x64   Google Chrome 68.0.3440.106