js实现复制功能

方式一：使用浏览器功能
<!doctype html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>点击复制功能的实现</title>
    </head>
 
    <body>
        <script type="text/javascript">
            function copyUrl2() {
                var Url2 = document.getElementById("biao1");
                Url2.select(); // 选择对象 
                document.execCommand("Copy"); // 执行浏览器复制命令 
                alert("已复制好，可贴粘。");
            }
        </script>用户定义的代码区域
        <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
        <input type="button" onClick="copyUrl2()" value="点击复制代码" />
    </body>
 
</html>
 
方式二：使用clipboard.js实现复制功能
选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架，而且体积小使用简单兼容性也好
1、引入插件，可以下载，也可以使用第三方cdn。
　　<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
2、对于HTML来说，我们有两种用法。
第一种　　//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });
说明：如果我们使用按钮复制的是另一个元素的内容，则我们可以使用这种方法。此时将按钮称为触发元素，被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器，而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象，参数可以是HTML元素，元素选择器。有success和error两个事件可以供我们监听，实现自己的逻辑。因为复制完成后，目标元素会处于选中状态，所以我们需要e.clearSelection()取消目标元素的选中状态。
优点：复制的内容可以是动态的，目标元素的值发生变化，复制的值也发生变化。
适用场景：复制内容可变，不固定。
第二种
//html部分
<button type="button" data-clipboard-text='复制内容'>复制</button>
//js部分
new Clipboard('button');
说明：data-clipboard-text的值为你要复制的内容。无目标元素，只有触发元素。
缺点：复制的内容是静态的，不变的，提前设置好的。
适用场景：复制内容固定不变
对于以上缺点，我们可以优化如下，使之复制的内容也是动态的。
//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
  alert('复制成功');
 });
 clipboard.on('error', function (e) {
  alert('复制失败');
 });
})