zoukankan      html  css  js  c++  java
  • 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 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>
  • 相关阅读:
    记录一下我的2017年阅读书单
    大型网站技术架构(二)--大型网站架构演化
    《大型网站技术架构:核心原理与案例分析》读书笔记系列
    过年了,别忘记给家人的礼物
    2017总结
    MyBatis + MySQL返回插入成功后的主键id
    微信公众号问题:{"errcode":40125,"errmsg":"invalid appsecret, view more at http://t.cn/LOEdzVq, hints: [ req_id: kL8J90219sg58 ]"}
    git删除本地分支
    Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十二)Spring集成Redis缓存
    Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十一)redis密码设置、安全设置
  • 原文地址:https://www.cnblogs.com/smallyi/p/6728102.html
Copyright © 2011-2022 走看看