刚好最近有朋友问我移动端进入页面复制内容到粘贴板功能是如何做的，其实很早之前我就研究过，这个功能在电脑端容易实现，但是在手机端安卓和IOS有区别，导致很多不兼容。

思来想去，最方便的还是使用clipboard，下面我就直接放代码说明。

1. 引入clipboard js库

  <script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.js"></script>

2. 写一个展示区域

<!-- Target -->
<input id="foo" style="opacity: 0;" type="text" value="这里存放复制内容">

<!-- Trigger -->
<a class="btn" data-clipboard-action="copy"  data-clipboard-target="#foo">
  
</a>

3. 对这个区域进行隐藏，不显示在页面

  <style>
  .btn{    margin: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
	cursor: pointer;
    left: 0;}
  </style>

4. JS代码

<script type="text/javascript">
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
	alert('成功！');
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
	alert('失败！');
});

</script>

测试网址：https://2wex.com/file/copy/index.html