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