注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置
clipboardData 对象
提供了对剪贴板的访问。
三个方法 :
1.clearData(sDataFormat) 删除剪贴板中指定格式的数据。
2.getData(sDataFormat) 从剪贴板获取指定格式的数据。
3.setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
例子:
1 <script language="JavaScript"> 2 <!-- 3 var text = "123"; 4 if (!window.clipboardData.setData('Text', text)) // 赋予 text 格式的数据 5 { 6 alert("复制失败!"); 7 } 8 text = window.clipboardData.getData('Text'); // 获取 text 格式的数据 9 alert(text); 10 window.clipboardData.clearData('Text'); // 清除 text 格式的数据 11 text = window.clipboardData.getData('Text'); 12 alert(text); 13 //--> 14 </script>
JS复制代码例子:
1 一些方法: 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <title>Js复制代码</title> 7 </head> 8 <body> 9 <p> 10 <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给QQ/MSN上的好友"> 11 <script language="javascript"> 12 function copyToClipBoard(){ 13 var clipBoardContent=""; 14 clipBoardContent+=document.title; 15 clipBoardContent+=""; 16 clipBoardContent+=this.location.href; 17 window.clipboardData.setData("Text",clipBoardContent); 18 alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友"); 19 } 20 </script>
复制URL地址:
1 <input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址"> 2 <script language="javascript"> 3 function copyUrl() 4 { 5 var clipBoardContent=this.location.href; 6 window.clipboardData.setData("Text",clipBoardContent); 7 alert("复制成功!"); 8 } 9 </script>
点击文本框时,复制文本框里面的内容
1 <input onclick="oCopy(this)" value="你好.要copy的内容!"> 2 <script language="javascript"> 3 function oCopy(obj){ 4 obj.select(); 5 js=obj.createTextRange(); 6 js.execCommand("Copy") 7 alert("复制成功!"); 8 } 9 </script>
复制文本框或者隐藏域中的内容
1 <script language="javascript"> 2 function CopyUrl(target){ 3 target.value=myimg.value; 4 target.select(); 5 js=myimg.createTextRange(); 6 js.execCommand("Copy"); 7 alert("复制成功!"); 8 } 9 function AddImg(target){ 10 target.value="[IMG]"+myimg.value+"[/ img]"; 11 target.select(); 12 js=target.createTextRange(); 13 js.execCommand("Copy"); 14 alert("复制成功!"); 15 } 16 </script> 17 <input name=myimg type=hidden id=myimg value="http://pmp.www.jb51.net" /> 18 <input name=imgurl type=text size=32 value="http://pmp.www.jb51.net" /> 19 <input type=button value="点击这里复制本站地址" onclick="CopyUrl(imgurl);" />
复制span标记中的内容
1 <script type="text/javascript"> 2 </script> 3 <br /> 4 <br /> 5 <script type="text/javascript">function copyText(obj) 6 { 7 var rng = document.body.createTextRange(); 8 rng.moveToElementText(obj); 9 rng.scrollIntoView(); 10 rng.select(); 11 rng.execCommand("Copy"); 12 rng.collapse(false); 13 alert("复制成功!"); 14 } 15 </script>
<span id="tbid">http://pmp.www.jb51.net</span>
[<a href="#" onclick="copyText(document.all.tbid)">点击复制</a>]<br/><br/>
<span id="tbid2">http://www.www.jb51.net/pmp</span>
[<a href="#" onclick="copyText(document.all.tbid2)">点击复制</a>]<br/><br/>
function copyQQ(qq){ var obj=document.getElementById(qq); obj.select(); js=obj.createTextRange(); js.execCommand("Copy"); alert("代码已经被成功复制!"); } //设置复制内容 附加 本网站的URL function SetCopyContent() { window.event.returnValue = false; var content = document.title + "/r/n"; content += document.getElementById("txt1").value + "/r/n"; content += "本资源来自 " + this.location.href; window.clipboardData.setData('Text', content); alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友"); } 调用: <input id="txt1" type="text" value="Hello World!" onclick="getTxtSelect(event)"/> <input type="button" value="复制文本框中的值" onclick="SetCopyContent();" />
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title>Window对象的属性02</title> 4 <script language="javascript" type="text/javascript"> 5 /* 6 window.screen对象:屏幕对象,包含了屏幕的相关信息。 7 window.clipboardData对象:剪贴板对象,对剪贴板操作的对象。(在网页内只能支持复制或者设置文本格式的) 8 clearData("Text"):清空剪贴板 9 getData("Text"):读取剪贴板的值,在IE中只能支持Text文本格式 10 setData("Text",value):设置剪贴板中的值 11 案例:复制地址给好友,见备注 12 禁止复制:body oncopy事件中 设置 return false; 13 oncopy、onpase事件:复制、粘贴事件,可用于多数控件 14 */ 15 16 //屏幕分辨率 17 function screenInfo() { 18 if (window.screen.width < 1024 || window.screen.height < 768) { 19 window.alert("您的电脑属于史前产物!"); 20 return; 21 } 22 window.alert("您的分辨率是:" + window.screen.width + " " + window.screen.height); 23 } 24 //复制地址给好友 25 function operClipBoard() { 26 var divObj = document.getElementById("divClipBoard"); 27 var content = divObj.innerText; 28 content = "您复制的内容是:" + content + " 资源来源:" + window.location.href; 29 window.alert('复制成功!'); 30 //客户复制完之后,这个属性才会显示内容 31 window.alert(window.clipboardData.getData("text")); 32 window.clipboardData.setData("Text",content); 33 } 34 //网页禁止复制 35 function forbidCopy() { 36 window.alert("网页的内容,自能看,不能动!"); 37 return false; 38 } 39 </script> 40 </head> 41 <body onload="screenInfo();" oncopy="forbidCopy();" > 42 <form id="form1" runat="server"> 43 <div id="divClipBoard" onclick="operClipBoard();" > 44 http://www.jb51.net 45 </div> 46 <hr /> 47 输入密码: 48 <input type="text" oncopy="window.alert('禁止复制!');return false;" /> 49 再输入一边密码: 50 <input type="text" onpaste="window.alert('禁止粘贴!');return false;" /> 51 </form> 52 </body> 53 </html>
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 5 <script language="javascript" type="text/javascript"> 6 /* 7 div 没有oncopy事件 8 body 与 文本框有这个事件 9 10 */ 11 12 function OperClipBoard() { 13 window.clipboardData.setData("Text", window.clipboardData.getData("Text") + " 本资源来自:" + window.location.href); 14 } 15 /* 16 流程:先oncopy触发,触发后仅仅是将内容复制到粘贴板,如果需要2次处理的话,等内容复制到粘贴板后,再进行2次操作,也就是对值进行处理后, 17 在赋值操作 18 */ 19 function copyContent() 20 { 21 window.setTimeout("OperClipBoard()", 100); 22 } 23 </script> 24 </head> 25 <body> 26 <form id="form1" runat="server"> 27 <div oncopy="copyContent();"> 28 Hello MyJSWorld! 29 </div> 30 <br /> 31 <input type="text" oncopy="OperClipBoard();" value="Hello MyJSWorld!" /> 32 </form> 33 </body> 34 </html>