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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
用js实现博客打赏功能
Oct 24 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
js实现楼层导航功能
2017/02/23 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
公司管理建议书范文
2014/03/12 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
户籍证明书标准模板
2014/09/10 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python