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 document.referrer判断访客来源网址
May 15 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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适配器模式介绍
2012/08/14 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php制作动态随机验证码
2015/02/12 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
Vue.use源码分析
2017/04/22 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
python实现图片批量剪切示例
2014/03/25 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Django实现分页功能
2018/07/02 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
python开根号实例讲解
2020/08/30 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
高中物理教学反思
2014/02/08 职场文书
学校学期工作总结
2015/08/13 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP