因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板。

在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家

效果图如下:

之前使用的是window.clipboardData.setData,只能支持IE和火狐。360浏览器、搜狗等浏览器,都泪崩。所以,研究了ZeroClipboard,尽量使用js代码写。

使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧):

jquery-1.4.1.min.js    
ZeroClipboard.js   
ZeroClipboard.swf

下面是最简单的实现了,做一下解释。

原理

把一个不可见的 Adobe Flash movie元素放到一个DOM元素上。用户点击那DOM元素时,其实点击的是那不可见的Adobe Flash movie元素,Flash代码来做将内容复制到剪切板的操作。

注意:如果用js模拟一个在那flash上的点击事件,并不能进行复制内容到剪贴板。原因是浏览器和flash的安全限制。

a标签就是一个按钮,你可以替换成图片等,但是id要和下面的clip.glue("copy_text");一致。

clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);这一句的di_div就是要复制的Div的ID。这个ID可以是其他的标签的ID。想复制什么就写什么的ID。

其他的就原样复制。你需要改的,就是最上面两行,第一行就是需要复制的标签,一般你的网页里已经有了。只要给他设置个ID即可。那么第一行可以删掉。第二行就可以自由发挥,反正用超链接也好,图片也好,只要ID和下面的一样即可。

对于事先准备的三个文件,请上传到代码中所示的路径中。这个据说是在服务器运行才行,我直接上传服务器测试的

这里已经是最简化的代码了。网上的那些乱七八糟的,实在不忍直视,所以,做出来就及时和大家分享一下。如果本文章有问题要问,可以在博客留言。

下面是实现的代码:

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</a><br>
<script type="text/javascript" src="/js/global/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/global/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = null;
ZeroClipboard.setMoviePath("/js/global/ZeroClipboard.swf");
$(document).ready(function(){
var AddContent = "\r\n本原创文章来源:C++技术网,阅读更多原创精品文章,欢迎访问C++技术网。\r\n";
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);
clip.glue("copy_text");
clip.addEventListener("complete", function(){
alert("文章纯文本内容已经复制到剪切板!");
});
});
</script>

  

简单实现兼容各大浏览器的js复制内容到剪切板的更多相关文章

  1. 在多浏览器使用JS复制内容到剪切板,无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  2. js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  3. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

  4. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  5. js 复制内容到剪切板

    function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...

  6. 原生js 复制内容到剪切板

    代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...

  7. JS禁止右键查看源码,禁止复制,复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  8. js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  9. 用clipboard.js实现纯JS复制文本到剪切板

    以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...

随机推荐

  1. HTTP权威指南一

    HTTP——因 特网的多媒体信使 每天, 都有数以亿万计的 JPEG 图片. HTML 页面. 文本文件. MPEG 电影. WAV音频文件. Java 小程序和其他资源在因 特网 上游弋. HTTP ...

  2. delphi 程序全屏显示无标题栏,覆盖整个屏幕

    delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,所以记下 procedure TMainFrm.FormCreate(Sender: TObject); begin w ...

  3. C++ STL小知识

    五种迭代器: 在STL中,迭代器主要分为5类,分别是:输入迭代器.输出迭代器.前向迭代器.双向迭代器和随机访问迭代器. 输入迭代器 :只读,支持++.==.!=: 输出迭代器 :只写,支持++: 前向 ...

  4. 十步让 WebForm项目 变为 Mvc项目

    1.创建一个项目名为 App_Asp 的 Asp.NET 空 Web 应用程序2.添加全局应用程序类 Global.asax3.富文本打开 Global,修改 Inherits 为 App_Asp_G ...

  5. ASP.NET MVC开发微信(四)

  6. 《Code Complete》ch.29 集成

    WHAT? 集成是这样一种软件开发行为:将一些独立的软件组合为一个完整的系统. WHY? 更容易诊断缺陷 尽早获得一个可工作的产品 更好的顾客关系 增强士气 更可靠地估计进度表 更准确的现状报告 HO ...

  7. Cocos2d-x3.2 使用物理引擎进行碰撞检测[转]

    通常在游戏简单逻辑判断和模拟真实的物理世界时,我们只需要在定时器中判断游戏中各个精灵的条件是否满足判断条件就可以了.例如,在飞机大战中,判断我方子弹和敌机是否发生碰撞一般在定时器中通过敌机所在位置的矩 ...

  8. 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性

    Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...

  9. Android 媒体键监听以及模拟媒体键盘的实现 demo

    有时我们需要程序模拟按钮或点击,而手机本身又没有,哪么可以采取其它方式 模拟实现,最后再去实际设备去测试(前期一般都拿不到设备): 如上一首,下一首,暂停等,手机上是没有的,但有些设备上是有的,所以我 ...

  10. Centos6.5 minicom安装与配置

    Linux下的Minicom的功能与下的超级终端功能相似,适于在通过超级终端对设备的管理以及对嵌入操作系统的升级 1.minicom的安装 查看是否安装:   rpm -qa | grep minic ...