clipboard复制粘贴使用总结

最新推荐文章于 2024-04-15 09:41:43 发布

a～～小太阳~~

最新推荐文章于 2024-04-15 09:41:43 发布

阅读量2.1k

点赞数

文章标签： js javascript

原文链接：https://blog.csdn.net/qq_24147051/article/details/106908326

版权

（1）介绍：

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

（2）clipboard复印内容的方式有

从target复印目标内容
通过function 要复印的内容
通过属性返回复印的内容

target复印目标内容，这里不说，就说一下function和属性的操作。

（3）Function操作有两种：

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

   <button class="btn">Copy_target</button>
   <div>hello</div>

clipboard.on(‘success’, function(e) {
console.log(e);
});

clipboard.on(‘error’, function(e) {
console.log(e);
});
</script>

第二种：

通过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);
});

（4）通过属性返回复印的内容

第一种：单节点

通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容

// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>

clipboard<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

clipboard<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</script>

第二种：多节点

通过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<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

clipboard<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

（5）函数和属性的兼容方式

函数：

//ClipboardJS.isSupported()　　//--------这句为：是否兼容
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
    alert('复制成功!')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
//尝试去掉alert，能弹出系统的“拷贝”工具，但是需要点击两次按钮才能弹出，具体原因还不清楚，参考上图。有人说可以试一下在触发的地方写一个空点击事件, οnclick="" 因为ios不单纯支持on事件
}); 

 
 
 
 1
2
3
4
5
6
7
8
9
10
11

属性：

<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'mayouchen@csdn.com'"
    />

–––––––––-
copy() {
var clipboard = new Clipboard(".email")
// console.log(clipboard);
clipboard.on(“success”, e => {
// console.log(“复制成功”, e);
Toast({
message: “复制成功”
})
// 释放内存
clipboard.destroy()
})
clipboard.on(“error”, e => {
// 不支持复制
Toast({
message: “手机权限不支持复制功能”
})
console.log(“该浏览器不支持自动复制”)
// 释放内存
clipboard.destroy()
})
}