Javascript 实现复制(Copy)动作方法大全
一、实现点击按钮,复制文本框中的的内容
<scripttype="text/javascript"> functioncopyUrl2() { varUrl2=document.getElementById("biao1"); Url2.select();//选择对象 document.execCommand("Copy");//执行浏览器复制命令 alert("已复制好,可贴粘。"); } </script> <textareacols="20"rows="10"id="biao1">用户定义的代码区域</textarea> <inputtype="button"onClick="copyUrl2()"value="点击复制代码"/>
二、复制专题地址和url地址,传给QQ/MSN上的好友
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>Js复制代码</title> </head> <body> <p> <inputtype="button"name="anniu1"onClick='copyToClipBoard()'value="复制专题地址和url地址,传给QQ/MSN上的好友"> <scriptlanguage="javascript"> functioncopyToClipBoard(){ varclipBoardContent=""; clipBoardContent+=document.title; clipBoardContent+=""; clipBoardContent+=this.location.href; window.clipboardData.setData("Text",clipBoardContent); alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友"); } </script>
三、直接复制url
<inputtype="button"name="anniu2"onClick='copyUrl()'value="复制URL地址"> <scriptlanguage="javascript"> functioncopyUrl() { varclipBoardContent=this.location.href; window.clipboardData.setData("Text",clipBoardContent); alert("复制成功!"); } </script>
四、点击文本框时,复制文本框里面的内容
<inputonclick="oCopy(this)"value="你好.要copy的内容!"> <scriptlanguage="javascript"> functionoCopy(obj){ obj.select(); js=obj.createTextRange(); js.execCommand("Copy") alert("复制成功!"); } </script>
五、复制文本框或者隐藏域中的内容
<scriptlanguage="javascript"> functionCopyUrl(target){ target.value=myimg.value; target.select(); js=myimg.createTextRange(); js.execCommand("Copy"); alert("复制成功!"); } functionAddImg(target){ target.value="[IMG]"+myimg.value+"[/img]"; target.select(); js=target.createTextRange(); js.execCommand("Copy"); alert("复制成功!"); } </script>
六、复制span标记中的内容
<scripttype="text/javascript"> </script> <br/> <br/> <scripttype="text/javascript">functioncopyText(obj) { varrng=document.body.createTextRange(); rng.moveToElementText(obj); rng.scrollIntoView(); rng.select(); rng.execCommand("Copy"); rng.collapse(false); alert("复制成功!"); } </script>
七、浏览器兼容 copyToClipboard("拷贝内容")
functioncopyToClipboard(txt){ if(window.clipboardData){ window.clipboardData.clearData(); clipboardData.setData("Text",txt); alert("复制成功!"); }elseif(navigator.userAgent.indexOf("Opera")!=-1){ window.location=txt; }elseif(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }catch(e){ alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'"); } varclip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if(!clip) return; vartrans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if(!trans) return; trans.addDataFlavor("text/unicode"); varstr=newObject(); varlen=newObject(); varstr=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); varcopytext=txt; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); varclipid=Components.interfaces.nsIClipboard; if(!clip) returnfalse; clip.setData(trans,null,clipid.kGlobalClipboard); alert("复制成功!"); } }
八、兼容各大浏览器的复制代码(结合ZeroClipboard.js)
<html> <head> <title>ZeroClipboardTest</title> <scripttype="text/javascript"src="ZeroClipboard.js"></script> <scriptlanguage="JavaScript"> varclip=null; function$(id){returndocument.getElementById(id);} functioninit(){ clip=newZeroClipboard.Client(); clip.setHandCursor(true); clip.addEventListener('mouseOver',function(client){ //updatethetextonmouseover clip.setText($('fe_text').value); }); clip.addEventListener('complete',function(client,text){ //debugstr("Copiedtexttoclipboard:"+text); alert("该地址已经复制,你可以使用Ctrl+V粘贴。"); }); clip.glue('clip_button','clip_container'); } </script> </head> <bodyonLoad="init()"> <inputid="fe_text"cols=50rows=5value=复制内容文本1> <spanid="clip_container"><spanid="clip_button"><b>复制</b></span></span> </body> </html>