clipboard.js

https://baike.baidu.com/item/Clipboard/3823870?fr=aladdin

Clipboard是提取或替换Windows系统剪贴板的文本内容。

Clipboard()

语法Clipboard ( { string } )

参数string：string类型，可选项，指定要复制到系统剪贴板上的文本。如果剪贴板上已有内容的话，该文本将取代剪贴板的当前内容返回值String。函数执行成功时，如果剪贴板上包含文本数据，那么函数返回剪贴板的当前内容；如果剪贴板上包含非文本数据（比如位图）或不包含任何数据，那么函数返回空字符串（""）。如果string参数的值为NULL，Clipboard()函数返回NULL。用法无论是否指定string参数，Clipboard()都将返回剪贴板的当前内容。当指定string参数时，剪贴板的原有内容被string参数的值取代；省略string参数时，仅仅得到剪贴板的内容。

功能提取或替换Windows系统剪贴板的文本内容。

以下内容转自 https://blog.csdn.net/weixin_38047955/article/details/74529187

最近在开发小程序项目里遇到一个小难题-----一键复制

在网页开发里 我们可以引用大牛封装好的复制插件，比如无flash插件clipboard.js适用移动端，pc端-------

言归正装，打开微信开发文档打开-APi即可查询到：

 

第一个是设置要复制的内容到剪切板，第二个是获取剪切板的内容，我们要用到的是第一个设置剪切板内容：

1.

 

1. {{detail.taokouling||''}}

2. 一键复制

 

2.js：

 

1. copyTBL:function(e){

2. var self=this;

3. wx.setClipboardData({

4. data: self.data.taokouling,

5. success: function(res) {

6. // self.setData({copyTip:true}),

7. wx.showModal({

8. title: '提示',

9. content: '复制成功',

10. success: function(res) {

11. if (res.confirm) {

12. console.log('确定')

13. } else if (res.cancel) {

14. console.log('取消')

15. }

16. }

17. })

18. }

19. });

20. }

data里我这边是设置成接口给的数据然后赋值到这里，只要我们点击复制按钮即可将你要的内容复制到剪切板，从而达到复制效果。

或者也可以在复制的对象里设置参数。将参数对应值传到js复制指令的data里即可。

 

 

 

clipboard使用总结

以下内容转自 https://blog.csdn.net/hry2015/article/details/70941912

1. 概述

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

2. 使用方式

2.1 引入js文件

以下所有的代码都使用到以下js文件

• 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中起作用

Copy

• 1
• 2

• textare 
  和上面的主要区别只是input和textare不同

hello 
Cut

• 1
• 2

• div 
  和上面的主要区别只是input和div不同

hello_div
Copy

• 1
• 2
• 3

以上的插件的初始化JS代码都是相同：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

2.3 通过function 要复印的内容

通过target，text的function复印内容

• 通过target的function复印内容 
  通过target指定要复印的节点，这里返回舒值是‘hello’

    Copy_target
    
hello

    

• 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’

 Copy
 

• 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值
 Copy
    Copy
    Copy

• 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的值
Copy
    Copy
    Copy
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

3. 代码

github