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：
js代码：
functioncopy(){
varUrl2=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表示操作成功；
应用实例:
js代码：
functioncopy(){
window.clipboardData.setData("text",document.getElementById("mytext").value);
alert("Thetextisontheclipboard,trytopasteit!");
}
注意：经测试该方法，仅在IE浏览器中有效；
在其他浏览器运行会报错：
firefox：TypeError:window.clipboardDataisundefined
chrom:TypeError:Cannotreadproperty'setData'ofundefined
经查资料：
MSDNhttps://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
ThisobjectisavailableinscriptasofMicrosoftInternetExplorer5.
http://help.dottoro.com/ljctuhrg.php也表示该方法出于对安全性的考虑,现在只支持IE:
InFirefox,Opera,GoogleChromeandSafari,usetheexecCommandmethodwiththe'Paste'commandtoretrieveandwiththe'Copy'commandtosetthetextcontentoftheclipboard.Becauseofsecurityrestrictions,thismethodmaynotalwayswork,seeExample2fordetails.
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！