复制内容到剪贴板

我们通常会通过单击按钮的操作,将定义好的内容直接复制到剪贴板

对于用户来说点了按钮直接【Ctrl】+【V】就可以了。

其实该功能的核心原理就是用到了window子对象clipboardData的一个方法:setData()

其语法是:clipboardData.setData(sDataFormat, sData)

参数sDataFormat表示要复制的内容的格式;参数sData则要复制的内容。
返回值:复制成功返回true;失败返回false。

比如:

clipboardData.setData("text","www.czz5.com")
<a href="#" onclick=javascript:clipboardData.setData("text","www.czz5.com")>
单击当前链接文本表示复制了内容到本地剪贴板,只需在【Ctrl】+【V】就能显示出定义的内容
</a>

以上是定义了固定的值复制到本地剪贴板,可用在诸如“将本页转阅给朋友”类似的功能需求中,以达到快捷转达网址或信息的目的。

此外,我们还会遇到这样的一些情况:当我们在某网站复制了一段内容之后,在粘贴下来时,发现不自觉的多了一行信息,该信息即是由内容复制到剪贴板同时增加的一行信息。

也就是说我们写入到剪贴板中的值除了拷贝的选择内容外,还有自己定义的值,那么如何获得“拷贝的选择内容”,这就需要使用到 document.selection.createRange() 方法,其中该方法配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。

<textarea cols=40 rows=10>
www.czz5.com 中国站长网
www.tangshanseo.cn 唐山SEO
www.xiaoduzi.com 健康减肥网
</textarea> <br>
<input type=button value="先选择文本框文本再单击本按钮" onclick=alert(document.selection.createRange().text)>
</form>

所以,应用了document.selection.createRange().text就能重新定义剪贴板中的值了。

选择复制本段文本,然后粘贴到文本编辑器中查看是不是多了一些附加信息。

<script type="text/javascript">
document.body.oncopy=function(){
 event.returnValue=false;
 var t=document.selection.createRange().text;
 var s="有关单击按钮将内容复制到剪贴板的原文内容地址: "+location.href;
 clipboardData.setData('Text',t+'rnrn'+s+'rn');
}
</script>

时间: 2024-10-14 22:29:17

复制内容到剪贴板的相关文章

jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

本文将结合实例讲解如何使用一款基于jQuery的插件--Zclip来实现复制内容到剪贴板的功能.其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡.而Zclip是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器. WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HT

jQuery简单实现点击文本框复制内容到剪贴板上的方法_jquery

本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e

表单提交时自动复制内容到剪贴板的js代码_javascript技巧

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe

兼容主流浏览器的JS复制内容到剪贴板_javascript技巧

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

js复制内容到剪贴板代码,js复制代码的简单实例_javascript技巧

如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)_jquery

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

表单提交时自动复制内容到剪贴板

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe

js实现IE跨浏览器复制内容到剪贴板

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 其实也不算安装啦,就是使用前的准备工作. 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和ZeroClipboard.swf 放入到你的项目中 下载地址:

简单实现兼容各大浏览器的js复制内容到剪切板_jquery

因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js