js实现一键复制功能

项目描述：最近做一个移动端活动页面，用户抽奖后会生成一个兑换码，为了优化用户体验，需要做一个复制按钮，能够一键复制兑换码。

项目需求: 兼容移动端所有主流浏览器。并且做为安卓和IOS的H5页面。

目前能够实现复制功能的方法有以下几种：

execCommand("copy"); clipboardData; ZeroClipboard.js

1.execCommand:是doucment对象的方法,可以实现浏览器菜单的很多功能，如保存文件，打开新文件，撤销，复制，等等。可以更好的完成文本编辑

有如下用法:

【全选】

格式：document.execCommand("SelectAll");

【打开】

格式：document.execCommand("Open");

【另存为】

格式：document.execCommand("SaveAs");

【打印】

格式：document.execCommand("print");

【剪切】

格式：document.execCommand("Cut","false",null);

【删除】

格式：document.execCommand("Delete","false",null);

【改变文本字体】

格式：document.execCommand("FontName","false",sFontName);

【改变字体大小】

格式：document.execCommand("FontSize","false",sSize|iSize);

【使绝对定位的元素可拖动】

格式：document.execCommand("2D-Position","false","true");

【复制】

格式：document.execCommand("Copy","false",null);

等等

应用实例:

HTML：

<input onclick="copy()" value="你好.要copy的内容!">

js代码：

function copy(){ var Url2=document.getElementById("js-copy-text"); Url2.select(); // 选择对象 try{  if(document.execCommand('copy', false, null)){   document.execCommand("Copy");   alert("已复制好，可贴粘。");  } else{   alert("复制失败，请手动复制");  }  } catch(err){   alert("复制失败，请手动复制");  }}

注意：经测试该方法，PC端IE需要手动设置权限，其他浏览器均支持，M端很少浏览器支持；

2. clipboardData:对象提供了对剪贴板的访问

clipboardData有三个方法：

clearData(sDataFormat)删除剪贴板中指定格式的数据； clearData(sDataFormat)getData(sDataFormat)从剪贴板中获取制定格式的数据； clearData(sDataFormat)setData(sDataFormat,sData)给剪贴板赋予指定格式的数据，返回true表示操作成功；

应用实例:

<input onclick="copy(this)" value="你好.要copy的内容!">

js代码：

function copy(){ window.clipboardData.setData("text",document.getElementById("mytext").value); alert("The text is on the clipboard, try to paste it!");}　　

注意：经测试该方法，仅在IE浏览器中有效；

在其他浏览器运行会报错：

firefox：TypeError: window.clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined