JS ----实现复制粘贴功能 (剪切板应用clipboardData)

注意: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 οnclick="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="点击这里复制本站地址" οnclick="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="#" οnclick="copyText(document.all.tbid)">点击复制</a>]<br/><br/> 
<span id="tbid2">http://www.www.jb51.net/pmp</span>   
[<a href="#" οnclick="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!"  οnclick="getTxtSelect(event)"/>
<input type="button" value="复制文本框中的值"  οnclick="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 + " \r\n 资源来源:" + 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 οnlοad="screenInfo();" οncοpy="forbidCopy();" >
42     <form id="form1" runat="server">
43     <div id="divClipBoard" οnclick="operClipBoard();" >
44         http://www.jb51.net
45     </div>
46     <hr />
47     输入密码:
48     <input type="text" οncοpy="window.alert('禁止复制!');return false;" />
49     再输入一边密码:
50     <input type="text" οnpaste="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") + "\r\n本资源来自:" + 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 οncοpy="copyContent();">
28         Hello MyJSWorld!
29     </div>
30     <br />
31     <input type="text" οncοpy="OperClipBoard();" value="Hello MyJSWorld!" />
32     </form>
33 </body>
34 </html>

 

转载于:https://www.cnblogs.com/smallyi/p/6728102.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值