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 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php实现的双色球算法示例
2017/06/20 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Selenium元素的常用操作方法分析
2018/08/10 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
2014年政协工作总结
2014/12/09 职场文书
怒海潜将观后感
2015/06/11 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
SQL基础的查询语句
2021/11/11 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技