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.
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!