复制粘贴插件——clipboard.js的使用

clipboard.js是一款使用简单的粘贴复制插件,它不依赖于Flash或其他框架，在github拥有3万多颗星可见其优秀程度，介绍如何使用它，以备存。

中文文档： clipboard.js 中文文档 - itxst.com

官网网站：https://github.com/zenorocha/clipboard.js

https://img1.itxst.com/0/d/0d077fc5dcf197b8f3a926b2f97fbad3.ziphttp://下载链接

1、script导入

<script src="dist/clipboard.min.js"></script>

2、使用方法

1、复制

相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target 属性，该属性值用来匹配另一个元素选择器。

<!-- Target -->
<!-- <input
  id="bar"
  value="无敌大帅哥"
> -->
<p id="bar">无敌大帅哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>

2、剪切

另外，也可以定义 data-clipboard-action 属性为 copy/cut 来，明确操作是 复制 / 剪切
如果忽略了这个属性，便默认 复制

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如上例，剪切 cut 的操作只能在 <input> 和 <textarea> 标签中起作用，在其他标签中会出现事件正常调用，但是操作是失败的，粘贴板是没有改变的。

3、通过属性复制文本

我们甚至不必需要其他承载文本的元素，仅通过 在触发元素中 添加 data-clipboard-text 属性 来完成复制

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

注意：

• data-clipboard-text “级别最高”，在 data-clipboard-target 等属性存在时，复制内容及相关参数以 data-clipboard-text 为准

3、初始化

 在js 页面还需要进行初始化

var clipboard = new ClipboardJS('.btn');

如果只是通过属性复制文本，如第2点的第3小点。只需初始化即可，以下脚本不用看了。

如果想动态的设置一个目标元素target，则需要返回一个节点,即 动态设置点击复制的目标元素

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

如果想动态设置内容文本text，则返回一个字符串String

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label') || 'default text ';
    }
});

在Bootstrap Modals 中或与任何其他更改焦点的库一起使用时，将希望将焦点元素设置为 container 值。

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

并且，如果在单页应用中使用时，要更精确地管理DOM的生命周期，可以使用以下方法清除创建的事件对象

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();