这几天做的一个h5项目，遇到了上图的这种需求，点击按钮复制框框里面的内容。一开始是使用JS原生的写法，核心语句是：
document.execCommand(“Copy”);
以及xxx.select();
但是浏览器一直报错提示select() is not a function…
仔细查找原因后，发现是由于我用div模拟了文本框的实现,但select()只能用于input框，因此修改之后可以正常复制了。然而，此方法适用于安卓系统，在ios上不起效。
代码如下：
function copy(){var copyTarget = document.getElementById('copyTarget');copyTarget.select();document.execCommand("Copy");}
clipboard插件
为了兼容ios系统，尝试使用了clipboard.js。
官方网站戳这里/
下面放一个官网上的点击按钮复制div的内容的例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>target-div</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><!-- 1. Define some markup --><div>hello</div><button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard --><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script></body></html>
关键是要给按钮添加data-clipboard-action=”xxx”以及data-clipboard-target=”xxx”,data-clipboard-target最好等于目标复制对象的类名。
此方法可以兼容ios系统，然而在安卓上又失效了。。。
同时兼容iOS以及Android
综上所述，要兼容这两大系统，同时使用JS原生的方法以及clipboard.js插件即可。
input框的优化
用户不能编辑input里面的内容，因此可以添加readonly=”readonly”属性，同时为了防止手机输入框的弹出，可以添加οnclick=”this.blur();”，使输入框失去焦点。
示例：
<input type="text" class="className" id="idName" value="要复制的内容" readonly="readonly" onclick="this.blur();"></input>
以上是本次项目完成过程中的小小心得，我这个前端的小菜鸟还在四处碰壁中，希望大家多多补充自己的意见噢~
