js实现复制 、剪切功能-clipboard.min.js 示例

html:

<div id="txt">我是要复制的内容</button>

<button id="copyBtn">点击复制</button>

js:

clipboard.min.js

三种复方式： 
　　1.指定复制目标taget
　　　　data-clipboard-target指向复印节点，这里指input的目标id；
　　　　data-clipboard-action 值为copy(默认)或cut。注意：cut只能在input和textare中起作用；

　　　　exp:<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>

　　2.通过function返回 
　　　　1）通过target的function
　　　　　　　　exp:

var clipboard = new Clipboard('#copyBtn', {
         target: function() {
                    return document.querySelector('#txt');
               }
     });

　　　　2）通过text的function

var txt = document.getElementById("txt").innerHTML;

　　　　var clipboard = new Clipboard('#copyBtn', {
   　　　　 text: function() {
   　　　　    return txt;
  　　　　  }
　　　　});

　　3.通过data-clipboard-text属性返回 //简单易操作，更适用于多个复制按钮
　　exp:　　<button data-clipboard-text="1">点击复制</button>

var btn = document.getElementById('copyBtn');
var clipboard = new Clipboard(btn);

//共用代码块
clipboard.on('success',
        function(e) {
            console.log("复制成功");
        });
clipboard.on('error',
        function(e) {

　　console.log("复制失败");

        });

首先声明本人资质尚浅，本文只用于个人总结。如有错误，欢迎指正、共同提高。

欢迎转载，转载请注明：转载自[ http://www.cnblogs.com/juneling ]

转载于:https://www.cnblogs.com/juneling/p/8548401.html