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.
-
<text class="tblin_items_txt" selectable="true">{{detail.taokouling||''}}</text> <!-- 复制的对象-->
-
<view class="tblin_items_btn" bindtap="copyTBL">一键复制</view><!-- 复制操作 -->
2.js:
-
copyTBL:function(e){
-
var self=this;
-
wx.setClipboardData({
-
data: self.data.taokouling,
-
success: function(res) {
-
// self.setData({copyTip:true}),
-
wx.showModal({
-
title: '提示',
-
content: '复制成功',
-
success: function(res) {
-
if (res.confirm) {
-
console.log('确定')
-
} else if (res.cancel) {
-
console.log('取消')
-
}
-
}
-
})
-
}
-
});
-
}
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文件
<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