JS实现“网页点击复制”的两个方法

2017-11-02    畅游网络

 　　网页中常用到“点击复制”的功能，但多数浏览器都会对其设限，因此既能突破这层限制，又要用得方便，并不容易。现在能兼容各大浏览器的方法有三个：execCommand、Clipboard.js和ZeroClipboard。ZeroClipboard（github）是通过加载Flash实现的，代码较大，据说手机浏览器的兼容性不好，下面重点介绍execCommand、Clipboard.js这两种方法。

 
 
　　方法一：execCommand
 
　　 execCommand是JS的一个方法，当HTML文档处于设计模式(designMode)时，可用execCommand方法操纵编辑区域的内容，包括复制。经测试仅<textarea>标签可用，并且不能使用style="display:none;"隐藏元素。详见execCommand语法。
 
 
<html>
<title>execCommand点击复制测试代码</title>
<script type="text/javascript">
function copyToClip()
{
            var clip=document.getElementById("content");
            clip.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("已复制好以下内容："+"\n"+clip.innerHTML);
}
</script>
</head>
<body>
 
<textarea id="content">自定义内容</textarea>
<input type="button" onClick="copyToClip()" value="点击复制代码" />
 
</body>
</html>
 
 
　　方法二：Clipboard.js
 
　　clipboard.js（github 官网）是一款轻量级的JS插件，可将input、textarea、div中通过copy/cut获取的内容复制到剪贴板，也可通过函数或属性方式复制内容，支持主流浏览器。
 
    <html>  
    <head>  
    <title>clipboard.js点击复制测试代码</title>  
    <meta charset="utf-8">  
    <script type="text/javascript" src="clipboard.js"></script>  
    <script type="text/javascript" src="jquery.js"></script>  
    </head>  
    <body>  
      
    <!--测试1-->  
    <!--button按钮测试，需要复制的值放在属性  data-clipboard-text中<br>-->  
    <button class="cs1" data-clipboard-text="测试1">测试1</button><br><br>  
      
    <!--测试2-->  
    <!--<a>标签测试，需要复制的值放在属性 data-clipboard-text中<br>-->  
    <a class="cs2" data-clipboard-text="测试2">测试2：a标签测试</a><br><br>  
      
    <!--测试3-->  
    <!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值-->  
    <div>获取指定标签中的值</div>  
     <button class="cs3" data-clipboard-action="copy" data-clipboard-target="div">测试3</button><br><br>  
      
     <!--测试4-->  
     <!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->  
<textarea id="t2"></textarea><br>  
<button class="cs4" data-clipboard-action="copy" data-clipboard-target="#t2">测试4</button>  
 
    </body>  
    </html>  
    <script type="text/javascript">  
    <!--测试1-->  
    $(document).ready(function(){    
       var clipboard = new Clipboard('.cs1');   
       clipboard.on('success', function(e) {  
           console.log(e);  
            alert("测试1复制成功！")  
            });  
       clipboard.on('error', function(e) {  
                   console.log(e);  
                   alert("测试1复制失败！请手动复制")  
            });  
    })  
    <!--测试2-->  
    $(document).ready(function(){    
       var clipboard1 = new Clipboard('.cs2');   
       clipboard1.on('success', function(e) {  
           console.log(e);  
            alert("测试2复制成功！")  
            });  
       clipboard1.on('error', function(e) {  
                   console.log(e);  
                   alert("测试2复制失败！请手动复制")  
            });  
    })  
    <!--测试3-->  
    $(document).ready(function(){    
       var clipboard2 = new Clipboard('.cs3');   
       clipboard2.on('success', function(e) {  
           console.log(e);  
            alert("测试3复制成功！")  
            });  
       clipboard2.on('error', function(e) {  
                   console.log(e);  
                   alert("测试3复制失败！请手动复制")  
            });  
    })  
    <!--测试4-->  
    $(document).ready(function(){    
       var clipboard3 = new Clipboard('.cs4');   
       clipboard3.on('success', function(e) {  
           console.log(e);  
            alert("测试4复制成功！")  
            });  
       clipboard3.on('error', function(e) {  
                   console.log(e);  
                   alert("测试4复制失败！请手动复制")  
            });  
    })  
    </script>