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>