一.Document.execCommand()

1.移动端复制

html结构

<p class="gift-code hide">礼包码：
    <input class="gift-code-info" value="111111" readonly="text">
    <span class="gift-code-code"></span>
    <a href="#" id="1" class="gift-code-copy">复制</a>
<p>

js代码

if(!isPC){
      $('.helper-box').on('click','.gift-code-copy',function(){    
        var inputText=$(this).prev('.gift-code-code').prev('.gift-code-info');
        var copyText=$(this).prev('.gift-code-code');
        console.log(inputText.val(),copyText.text());
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
            window.getSelection().removeAllRanges();
            var range = document.createRange();
            range.selectNode(copyText[0]);
            util.console.log('range:', range);
            window.getSelection().addRange(range);
    
            var result = document.execCommand('copy');
            if(result){
                popup.toast('复制成功');
            }else{
                popup.toast('复制失败');
            }
            window.getSelection().removeAllRanges();
        }else{
            inputText.select();
            var result = document.execCommand('copy', false);
            if(result){
                popup.toast('复制成功');
            }else{
                popup.toast('复制失败');
            }
        }

    })
  }

2.pc端的复制

注：IE仅支持IE9+

if(isPC){
        $('.helper-box').on('click','.gift-code-copy',function(){    
            var inputText=$(this).prev('.gift-code-code').prev('.gift-code-info');
            var copyText=$(this).prev('.gift-code-code');
            console.log(inputText.val(),copyText.text());          
            inputText.select();
            document.execCommand("Copy","false",null)
  
        })
    }

document.execCommand()文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
document.execCommand()参考文章：
https://www.cnblogs.com/xhyu/p/5370111.html

二.jquery.zclip+flash

加载jQuery和zClip,地址请根据各自的存放地址做相应修改。

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

js实现点击复制的代码

<script>
        $('#copyBtn').zclip({
            path: "ZeroClipboard.swf",
            copy: function(){
                return $('#link').val();
  　　　 　　}
        });
</script>

html

<div>
<input type="text" value="小松博客这个一个神奇的博客" id="link"> 
<span id="copyBtn">复制链接</span> 
</div>

注意：
1.zclip由于在target可见之前不能注册的问题，需要在显示后调用此方法进行注册；
2.不能跨域使用;
3.本地测试无法使用，需上传到服务器；
4.确保有Flash支持；
5.如果复制的内容来自输入框input，textarea等，copy对象使用：

copy:function(){
   return $(xxx).val();
}

6.如果复制的内容来自页面元素div、p之类的，copy对象使用：

copy:$(xxx).text();

7.配置说明

path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

8.提供了三方法

show:$(selected).zclip('show'); //复制功能有效
hide:$(selected).zclip('hide'); //复制功能无效
remove:$(selected).zclip('remove'); //完全移除复制功能

三.clipboard.js

没有Flash，没有框架
1.下载引入clipboard.js
2.实例化：new ClipboardJS( );
3.用法：可以复制、剪切、从属性复制文本；
复制：通过data-clipboard-target在触发器元素中添加属性来实现
可以定义data-clipboard-action属性以指定是要copy还是cut内容,如果省略此属性，copy则默认使用。
剪切：cut操作仅适用于<input>或<textarea>元素。
从属性复制文本：
不需要另一个元素来复制其内容。可以data-clipboard-text在触发器元素中包含一个属性。

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

4.浏览器支持：IE9+，Chrome Opera Firefox Safari
复制的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clipboardjs复制</title>
</head>
<script src="../dist/clipboard.min.js"></script>
<body>
<!-- Target -->
<input id="foo" value="1111" type="text">

<!-- Trigger -->
<button class="btn" data-clipboard-action='copy' data-clipboard-target='#foo'>copy</button>
</body>
</html>
<script>
var clipboard=new ClipboardJS('.btn');

clipboard.on('success',function(e){
    console.log(e);
})
clipboard.on('error',function(e){
    console.log(e);
})




</script>

参考
下载zip文件
 https://clipboardjs.com/
https://juejin.im/post/5a94f8eff265da4e9b593c29

移动端和pc端的复制到剪贴板功能