clipboard使用总结

女爷i 2024-04-19 15:36 39阅读 0赞

1. 概述  
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中  
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;  
官网

2. 使用方式  
2.1 引入js文件  
以下所有的代码都使用到以下js文件

<script src="/web2/component/clipboard/1.6.1/clipboard.js"></script>   
1  
clipboard复印内容的方式有  
\- 从target复印目标内容  
\- 通过function 要复印的内容  
\- 通过属性返回复印的内容

2.2 从target复印目标内容  
可以从input、textare、div中通过copy/cut获取内容目标内容，其HTML的代码如下

input  
data-clipboard-target指向复印节点，这里指input的目标id  
data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用  
<input id="foo" type="text" value="hello">  
<button class="btn" data-clipboard-action="copy" data-clipboard-target="\#foo">Copy</button>  
1  
2  
textare  
和上面的主要区别只是input和textare不同  
<textarea id="bar">hello</textarea>   
<button class="btn" data-clipboard-action="cut" data-clipboard-target="\#bar">Cut</button>  
1  
2  
div  
和上面的主要区别只是input和div不同  
<div>hello\_div</div>  
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>  
1  
2  
3  
以上的插件的初始化JS代码都是相同：

<script>  
       // button的class的值  
        var clipboard = new Clipboard('.btn');  
        clipboard.on('success', function(e) \{  
            console.log(e);  
        \});

clipboard.on('error', function(e) \{  
            console.log(e);  
        \});  
    </script>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
2.3 通过function 要复印的内容  
通过target，text的function复印内容

通过target的function复印内容  
通过target指定要复印的节点，这里返回舒值是‘hello’  
    <button class="btn">Copy\_target</button>  
    <div>hello</div>

<script>  
    var clipboard = new Clipboard('.btn', \{  
    // 通过target指定要复印的节点  
        target: function() \{  
                   return document.querySelector('div');  
              \}  
    \});

clipboard.on('success', function(e) \{  
        console.log(e);  
    \});

clipboard.on('error', function(e) \{  
        console.log(e);  
    \});  
    </script>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
通过text的function复印内容  
text的function指定的复印内容，这里返回‘to be or not to be’  
 <button class="btn">Copy</button>  
 <script>  
    var clipboard = new Clipboard('.btn', \{  
    // 点击copy按钮，直接通过text直接返回复印的内容  
        text: function() \{  
            return 'to be or not to be';  
        \}  
    \});

clipboard.on('success', function(e) \{  
        console.log(e);  
    \});

clipboard.on('error', function(e) \{  
        console.log(e);  
    \});  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
2.4 通过属性返回复印的内容  
通过data-clipboard-text属性返回复印的内容

单节点  
通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容  
// 通过id获取复制data-clipboard-text的内容   
<div id="btn" data-clipboard-text="1">  
        <span>Copy</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>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
多节点  
通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3  
//  多节点获取button的data-clipboard-text值  
 <button data-clipboard-text="1">Copy</button>  
    <button data-clipboard-text="2">Copy</button>  
    <button data-clipboard-text="3">Copy</button>  
<script>  
    var btns = document.querySelectorAll('button');  
    var clipboard = new Clipboard(btns);

clipboard.on('success', function(e) \{  
        console.log(e);  
    \});

clipboard.on('error', function(e) \{  
        console.log(e);  
    \});  
    </script>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
多节点  
通过class获取所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3  
//   通过class注册多个button，获取data-clipboard-text的值  
<button class="btn" data-clipboard-text="1">Copy</button>  
    <button class="btn" data-clipboard-text="2">Copy</button>  
    <button class="btn" data-clipboard-text="3">Copy</button>  
 <script>  
    var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) \{  
        console.log(e);  
    \});

clipboard.on('error', function(e) \{  
        console.log(e);  
    \});  
    </script>  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
3. 代码  
github：[https://github.com/zenorocha/clipboard.js/][https_github.com_zenorocha_clipboard.js]  
转载：https://blog.csdn.net/hry2015/article/details/70941912

[https_github.com_zenorocha_clipboard.js]: https://github.com/zenorocha/clipboard.js/

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 clipboard使用总结

. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到...

女爷i/ 2024年04月19日 15:36/ 0 赞/ 40 阅读

相关【js】使用 clipboard.js完成复制粘贴

[clipboardjs官网][clipboardjs]：效果图展示： ![20190926110007446.gif][] 代码展示：（可直接运行）

深碍√TFBOYSˉ_/ 2023年08月17日 15:23/ 0 赞/ 117 阅读

相关 React 中使用copy-to-clipboard

import copy from 'copy-to-clipboard'; const handleCopyPageLink = (record: any)

旧城等待，/ 2022年10月26日 03:49/ 0 赞/ 222 阅读

相关使用clipboard.js复制示例

项目地址：[https://github.com/zenorocha/clipboard.js][https_github.com_zenorocha_clipboard.js

淡淡的烟草味﹌/ 2022年06月06日 05:37/ 0 赞/ 201 阅读

相关使用clipboard.js实现复制功能

最近在开发中，使用原生js复制时，发现在360 7.1的低版本中无法实现代码的复制，随后便网上找了插件实现复制功能，检验后，发现在低版本也支持 demo： <i

青旅半醒/ 2022年05月23日 07:11/ 0 赞/ 247 阅读

相关 clipboard使用总结兼容各浏览器的复制粘贴功能

[https://juejin.im/entry/5a5f3821518825734d14a754][https_juejin.im_entry_5a5f38215188257

爱被打了一巴掌/ 2022年01月18日 23:39/ 0 赞/ 333 阅读

相关 clipboard剪切板

<template> <view> <page-head :title="title"></page-head> <view clas

╰+攻爆jí腚メ/ 2021年12月14日 05:43/ 0 赞/ 263 阅读

相关粘贴板clipboard.js的使用方法

粘贴板`clipboard.js`的使用方法一、使用场景在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

我就是我/ 2021年08月27日 01:15/ 0 赞/ 607 阅读

相关 clipboard使用总结

1. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪

痛定思痛。/ 2021年06月24日 14:37/ 0 赞/ 559 阅读

相关剪切板clipboard

工作中遇到的一个问题,在项目系统中复制一段内容,或点击一个按钮,然后将这段内容添加到使用者当前电脑系统的剪切板中.刚开始的时候觉得很迷惑不知如何实现,后来前端开发人员说,她们可

你的名字/ 2021年05月12日 11:54/ 0 赞/ 546 阅读