编程 Javascript

js 剪切板应用clipboardData详细解析

Posted in Javascript onDecember 17, 2013

注意：ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置

clipboardData 对象

提供了对剪贴板的访问。

三个方法
1.clearData(sDataFormat) 删除剪贴板中指定格式的数据。
2.getData(sDataFormat) 从剪贴板获取指定格式的数据。
3.setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。

例子

一些方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js复制代码</title>
</head>
<body>
<p>
<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友">
<script language="javascript">
   function copyToClipBoard(){
    var clipBoardContent="";
    clipBoardContent+=document.title;
    clipBoardContent+="";
    clipBoardContent+=this.location.href;
    window.clipboardData.setData("Text",clipBoardContent);
    alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
}
</script>
<br />
<br />

直接复制url
<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
   function copyUrl()
   {
    var clipBoardContent=this.location.href;
    window.clipboardData.setData("Text",clipBoardContent);
    alert("复制成功!");
   }
</script>
<br/>
<br/>
点击文本框时,复制文本框里面的内容
<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>
<br />
<br />
复制文本框或者隐藏域中的内容
<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select();
js=myimg.createTextRange();
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange();
js.execCommand("Copy");
alert("复制成功!");
}
</script>

<br />
<br/>
复制span标记中的内容
<script type="text/javascript">
</script>
<br />
<br />
<script type="text/javascript">function copyText(obj)
{
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");
}
</script>

以下是代码片段：<br />
<br />
<span id="tbid">http://pmp.3water.com</span>
[<a href="#" onclick="copyText(document.all.tbid)">点击复制</a>]<br/><br/>
<span id="tbid2">http://www.3water.com/pmp</span>
[<a href="#" onclick="copyText(document.all.tbid2)">点击复制</a>]<br/><br/>

</p>
</body>
</html>

还有一种方法：

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上推荐给你的好友");
        }

调用：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Window对象的属性02</title>
    <script language="javascript" type="text/javascript">
        /*
            window.screen对象：屏幕对象，包含了屏幕的相关信息。
            window.clipboardData对象：剪贴板对象，对剪贴板操作的对象。(在网页内只能支持复制或者设置文本格式的)
            clearData("Text"):清空剪贴板
            getData("Text"):读取剪贴板的值，在IE中只能支持Text文本格式
            setData("Text",value):设置剪贴板中的值
            案例：复制地址给好友，见备注
            禁止复制：body oncopy事件中 设置 return false；
            oncopy、onpase事件：复制、粘贴事件，可用于多数控件
        */        //屏幕分辨率
        function screenInfo() {

            if (window.screen.width < 1024 || window.screen.height < 768) {
                window.alert("您的电脑属于史前产物！");
                return;
            }
            window.alert("您的分辨率是：" + window.screen.width + " " + window.screen.height);
        }
        //复制地址给好友
        function operClipBoard() {
            var divObj = document.getElementById("divClipBoard");
            var content = divObj.innerText;
            content = "您复制的内容是：" + content + " \r\n 资源来源：" + window.location.href;
            window.alert('复制成功！');
            //客户复制完之后，这个属性才会显示内容
            window.alert(window.clipboardData.getData("text"));
            window.clipboardData.setData("Text",content);
        }
        //网页禁止复制
        function forbidCopy() {
            window.alert("网页的内容，自能看，不能动！");
            return false;
        }
    </script>
</head>
<body onload="screenInfo();" oncopy="forbidCopy();" >
    <form id="form1" runat="server">
    <div id="divClipBoard" onclick="operClipBoard();" >
        https://3water.com
    </div>
    <hr />
    输入密码：
    <input type="text" oncopy="window.alert('禁止复制!');return false;" />
    再输入一边密码：
    <input type="text" onpaste="window.alert('禁止粘贴!');return false;" />
    </form>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    <script language="javascript" type="text/javascript">

        /*
            div 没有oncopy事件
            body 与 文本框有这个事件
        */
        function OperClipBoard() {
            window.clipboardData.setData("Text", window.clipboardData.getData("Text") + "\r\n本资源来自:" + window.location.href);
        }
        /*
            流程：先oncopy触发，触发后仅仅是将内容复制到粘贴板，如果需要2次处理的话，等内容复制到粘贴板后，再进行2次操作，也就是对值进行处理后，
            在赋值操作
        */
        function copyContent()
        {
            window.setTimeout("OperClipBoard()", 100);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div oncopy="copyContent();">
        Hello MyJSWorld!
    </div>
    <br />
    <input type="text" oncopy="OperClipBoard();" value="Hello MyJSWorld!" />
    </form>
</body>
</html>

js 剪切板应用clipboardData详细解析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

找到了一篇jQuery与Prototype并存的冲突的解决方法

Aug 29 Javascript

javascript 字符 Escape,encodeURI,encodeURIComponent

Jul 09 Javascript

jQuery中校验时间格式的正则表达式小结

Sep 22 Javascript

鼠标左键单击冲突的问题解决方法(防止冒泡)

May 14 Javascript

jQuery插件formValidator实现表单验证

May 23 Javascript

JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）

May 17 Javascript

基于JavaScript实现百度搜索框效果

Jun 28 Javascript

JS排序算法之冒泡排序，选择排序与插入排序实例分析

Dec 13 Javascript

关于HTTP传输中gzip压缩的秘密探索分析

Jan 12 Javascript

小程序云开发实现数据库异步操作同步化

May 18 Javascript

解决vuex改变了state的值,但是页面没有更新的问题

Nov 12 Javascript

JavaScript 中的执行上下文和执行栈实例讲解

Feb 25 Javascript

JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

Dec 17 #Javascript

JavaScript禁止页面操作的示例代码

Dec 17 #Javascript

javascript中parentNode,childNodes,children的应用详解

Dec 17 #Javascript

javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

Dec 17 #Javascript

JS关闭窗口与JS关闭页面的几种方法小结

Dec 17 #Javascript

不提示直接关闭网页窗口的JS示例代码

Dec 17 #Javascript

js实现倒计时时钟的示例代码

Dec 17 #Javascript