文档

github

官方网站

兼容

优势

1. 在不考虑兼容低版本浏览器的情况下，对于传统的复制到剪切板是得使用flash来完成，这杨非常的臃肿及文件大小较大

步骤（分两方法下载）

第一方法：基础步骤

<!-- 引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>

第二方法：使用npm来安装

npm install clipboard --save

体验

检验

元素属性（不是js属性）	属性说明
data-clipboard-target=”Id值”	绑定html节点元素之间复制源，以这个为
data-clipboard-action=”cut”	剪切到剪切板中。使用 cut ，只能使用 input 与 textarea，应该只是清空了吧
data-clipboard-text=”要复制的文本内容”	复制html节点元素data-clipboard-text属性的值

里面实例化参数一是帮你绑定好了的事件是click，所以你可以不用事件就可以使用。

复制input内容

<!-- 3、通过使用 data-clipboard-target 来绑定按钮与输入框的事件。 -->
<input type="text" name="" id="foo" value="我是一段要被复制的文字">
<button class="btn" data-clipboard-target="#foo">单击复制</button>

<!-- 1、引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
    // 2、实例化（参数内是要触发事件源对象元素）
    new Clipboard('.btn');
</script>

复制 textarea 文本框中的值

可以

<!-- 3、通过使用 data-clipboard-target 来绑定按钮与输入框的事件。并且使用  data-clipboard-action="cut" 来剪切 -->
<textarea id="textarea">我是内容textarea</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#textarea" >单击复制</button>

<!-- 1、引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
    // 2、实例化（参数内是要触发事件源对象元素）
    new Clipboard('.btn');
</script>

==注意：使用 data-clipboard-action=”cut” 的话，只能使用在 input 与 textarea 文本框==

复制自定义元素的内容

<!-- 3、通过使用 data-clipboard-textt 来复制自定义的 -->
<button class="btn" data-clipboard-text="我是被复制的" >单击复制</button>

    <!-- 1、引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
 // 2、实例化（参数内是要触发事件源对象元素）
    new Clipboard('.btn');
</script>

回调函数

使用 on 来绑定元素的回调事件

回调函数	回调说明
success	成功
error	错误

success 成功

<!-- 3、通过使用 data-clipboard-textt 来复制自定义的 -->
<button class="btn" data-clipboard-text="我是被复制的" >单击复制</button>

    <!-- 1、引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">

    // 2、实例化（参数内是要触发事件源对象元素）
    var clipboard = new Clipboard('.btn');
    // 4、注意的是，可以直接使用on来绑定，而不是jquery的里面的on哦。绑定成功的函数
    clipboard.on('success',function (e) {
        console.info('触发的方式（复制还是剪切）', e.action);
        // 结果： copy 就是复制 。结果：cut 就是剪切
        console.info('复制的内容:', e.text);
        console.info('触发的事件源（哪个元素单击的）:', e.trigger);
        e.clearSelection();
    })
</script>

error 错误

由于本人不知道怎么弄错误的，目前不知道，下面也是不会触发的事件

<!-- 3、通过使用 data-clipboard-textt 来复制自定义的 -->
<button class="btn"  >单击复制</button>

<!-- 1、引入相关的 clipboard 文件  -->
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
    var clipboard = new Clipboard('.btn');
    clipboard.on('error', function(e) {
        console.error('触发的方式（复制还是剪切）:', e.action);
        console.error('触发的事件源（哪个元素单击的）:', e.trigger);
    });
</script>

其他的配置复制方式

参数二（第二个参数是json对象）：配置一些返回值或者其他的代码。所有的返回值可以可以在回调函数内调用

配置属性或方法	说明
target	类型函数，接收的值是单击的对象，能够把对象里面的内容复制下来，得返回一个对象
text	设置复制的自定义的内容。获取其他，只要你能获取的东西，都是可以的，不管是哪个节点上都可以复制上，甚至在变量里面（自定义字符串）
container	在引导模式或其他任何更改焦点的库中使用，您将希望将焦点元素设置为

target 操作节点

设置当前返回的对象，可以在当前单击的节点操作获取其他的节点里面的内容

<!-- <button class="btn">单击复制<h2>标签没获取到</h2></button> -->
<button class="btn">单击复制</button>

<script type="text/javascript">
    var clipboard = new Clipboard('.btn',{
        target: function(trigger) {
            // 1、直接获取单击元素的内容，如元素内有元素了，则去除的标签，获取里面的值。如果真的想获取其他里面的标签，不能使用这个，使用 text 方法。
            return trigger;
            // 2、获取自定义的
        }
    });
    clipboard.on('success',function (e) {
        console.info('触发的方式（复制还是剪切）', e.action);
        // 结果： copy 就是复制 。结果：cut 就是剪切
        console.info('复制的内容:', e.text);
        console.info('触发的事件源（哪个元素单击的）:', e.trigger);
        console.log(e.container)
        e.clearSelection();
    })
</script>

text 能够自定义（包括数组等）或者获取

主要是解析成字符串返回。

<button data-sid="2017/12/21" class="btn" >单击复制<i>我是里面的i标签<i></button>

<script type="text/javascript">
    var clipboard = new Clipboard('.btn',{
        text:function (argument) {
            // 1、可以是数组、变量（布尔值和函数会直接返回字符串）;
            return ['12','23123','24234'，[1,2,3,4]];
            // 2、字符串 
            return '我是要被复制了'
            // 3、可以获取单击的目标点自定义属性值
            return argument.getAttribute('data-sid'); // 这粒还可以 使用jquery 获取其他节点上的东西。
            // 4、他是获取字符串的，所以可以获取标签，不可以使用target方法获取。
            return argument.innerHTML;
            // 除了json数据

        }
    });
    clipboard.on('success',function (e) {
        console.info('复制的内容:', e.text);// 在这粒就可以获取复制的内容
        e.clearSelection();
    })

</script>

container

销毁创建的 实例对象 destroy();

1. 当不在使用对象来获取，那么就可以释放内存，让设备能够减轻负担。
2. 只能复制一次的需求的话，就可以这摸干

<button class="btn" data-clipboard-text="只能复制我一次">单击复制</button>

<script type="text/javascript">
    var clipboard = new Clipboard('.btn');
    clipboard.on('success',function (e) {
        console.info('触发的方式（复制还是剪切）', e.action);
        // 结果： copy 就是复制 。结果：cut 就是剪切
        console.info('复制的内容:', e.text);
        console.info('触发的事件源（哪个元素单击的）:', e.trigger);
        console.log(e.container)
        e.clearSelection();

        // 进行销毁实例对象。
        clipboard.destroy();
    })
</script>

实战

当在页面有多条数据的话。

http://m.lolku.cn/html/yuan_app/temporary01.html