JS代码实现复制功能

本人没什么基础看了好久百度，不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来，感觉废话一堆效果还没能达到需要复制 的效果。

然而在我看来，js复制代码 无非就那么几句罢了。原生copy代码：document.execCommand("Copy");  就可以达到复制的效果了，但我习惯用以下的方法：

首先，必须要调用第三方【clipboard.min.js】包，有它才能js代码才能实现复制功能，js包网上都可以下。这个如同jQuery一样调用：<script src="../js/clipboard.min.js"></script> 即可，这是第一句代码；

第二句代码 对对象进行操作的方式方法有两种可以选择：

（1）data-clipboard-action="copy"；    复制

（2）data-clipboard-action="cut"；     剪切

第三句代码 copy或cut 的对象是谁：

data-clipboard-target=".abc"      //这个对象可以是 #id，也可以类选择器  .class ，也可以是元素等等

第四句代码 实例化 Clipboard 对象：

var clipboard = new Clipboard(".abc");  到这里代码就已经实现了复制的功能了

-----------------------------------------------------------------------------------------------------------------------------------------

看看 案例代码：

（1）纯文本copy：textarea

<script type="text/javascript" src="../js/clipboard.min.js"></script>

<script type="text/javascript">

　　function copyUrl2(){

　　　　var Url2=document.getElementById("biao1");//获取文本框id

　　　　Url2.select(); // 选择对象用户定义的代码区域

　　　　document.execCommand("Copy"); //原生copy方法执行浏览器复制命令

　　　　alert("内容复制成功，去粘贴看看！"); //弹窗

　　　　//window.location.href = 'weixin://';  //打开手机微信

　　}

</script>

<textarea cols="27" rows="5" id="biao1">这里面的文本内容被复制 </textarea>

<input type="button" onClick="copyUrl2()" value="点击复制Copy" /> 

 

-------------------------------------------------------------------------------------------------

（2）非纯文本内容的某个标签：span例举

<span id="btn" class="abc" data-clipboard-action="copy" data-clipboard-target=".abc">这里可以点击复制</span>

点击内容直接执行js代码：

<script type="text/javascript" src="../js/clipboard.min.js"></script>

<script type="text/javascript">

var clipboard = new Clipboard("#btn"); //实例化对象

//复制成功执行的回调

clipboard.on('success', function(e) {

　　console.log(e); //返回值类型给控制台 没什么用 可以注释掉

　　alert("复制成功，去粘贴看看吧！");

　　//window.location.href = 'weixin://';  //打开手机微信

});

//复制失败执行的回调

clipboard.on('error', function(e) {

　　alert("复制失败！请手动复制")

});

</script>

 

转载于:https://www.cnblogs.com/longxinyv/p/11066611.html