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

最新推荐文章于 2024-05-11 11:49:42 发布

weixin_34324081

最新推荐文章于 2024-05-11 11:49:42 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/smallyi/p/6728102.html

版权

注意：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

weixin_34324081

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS ----实现复制粘贴功能 (剪切板应用clipboardData)

注意：ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置clipboardData 对象提供了对剪贴板的访问。三个方法 :1.clearData(sDataFormat) 删除剪贴板中指定格式的数据。2.getData(sDataFormat) 从剪贴板获取指定格式的数据。3.setData(sDataFormat, sData) 给剪贴板赋予指定...
复制链接

扫一扫