js 剪切板应用clipboardData详细解析


Posted in Javascript onDecember 17, 2013

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

clipboardData 对象

提供了对剪贴板的访问。

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

例子

<script language="JavaScript">
<!--
var text = "123";
if (!window.clipboardData.setData('Text', text)) // 赋予 text 格式的数据
{
     alert("复制失败!");
}
text = window.clipboardData.getData('Text'); // 获取 text 格式的数据
alert(text);
window.clipboardData.clearData('Text'); // 清除 text 格式的数据
text = window.clipboardData.getData('Text');
alert(text);
//-->
</script>

一些方法:

<!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>

<input name=myimg type=hidden id=myimg value="http://pmp.3water.com" />
<input name=imgurl type=text size=32 value="http://pmp.3water.com" />
<input type=button value="点击这里复制本站地址" onclick="CopyUrl(imgurl);" />

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

调用:

<input id="txt1" type="text" value="Hello World!"  onclick="getTxtSelect(event)"/>
<input type="button" value="复制文本框中的值"  onclick="SetCopyContent();" />

<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>
Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP页面间传递参数实例代码
2008/06/05 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
客户端静态页面玩分页
2006/06/26 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Flask-Mail用法实例分析
2018/07/21 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Django实现内容缓存实例方法
2020/06/30 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
六年级数学教学反思
2014/02/03 职场文书
给孩子的新年寄语
2014/04/08 职场文书
影视后期实训报告
2014/11/05 职场文书