关于 移动端实现 点击按钮复制指定内容到剪切板 的坑

最近项目中遇到一个需求 ：

　　　　html5页面 点击立即邀请出现分享弹窗   然后点击复制链接区域复制 自定义链接（拼接网站注册链接 + 邀请码） 到剪切板   如图：

 

在网上搜到　　　clipboard.js  可实现需求　。

clipboard.js　　GitHub:https://github.com/zenorocha/clipboard.js       网址：https://clipboardjs.com/

此插件 使用纯 JavaScript （无需 Flash）实现了复制浏览器内容到系统剪切板的功能，可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。

 

项目代码 ：弹框 和 实现copy部分

 

 

 

　　最后将 链接插入#foo 中，如图

 

 

 

 

 实现需求：弹框出现时，button 定位覆盖 点击区域

 

 ======================================================================================

 

  

 

 还原原形如下：

 

html 部分:

<p id="foo">这里是复制内容</p>
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！"></button>

 

js 部分:

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

<script type="text/javascript">

　　var clipboard = new Clipboard('.btn');

</script>

 

坑（移动端遇到的问题）：

1：上述  p 标签 不能 隐藏 ——隐藏会导致复制失效（可以用tex-indent 隐藏内容，或者 改变文字颜色为页面底色 来hack）

2：上边html 内容 不能出现在弹窗中————导致复制失效   

　　此处弹窗

　　a:用定位 到屏幕外侧 （left：-200%；），出现弹窗（left：0；）实现的，html 内容 在弹窗中 复制也会失效。

　　b: 用 display:none; display:"block; 实现 同1

3： 不能用 trigger（“click"）模拟 来触发 .btn 实现复制——导致复制失效