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 相关文章推荐
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
You might like
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
Javascript的闭包
2009/12/31 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python2.7实现邮件发送功能
2018/12/12 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
相亲大会策划方案
2014/06/05 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js