一、如果只考虑IE浏览器,可以直接用原声js实现

if(window.clipboardData){
//清空操作系统粘贴板
window.clipboardData.clearData();
//将需要复制的内容复制到操作系统粘贴板
window.clipboardData.setData("Text", "要复制的内容");
}

二、如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板。

这里需要用到插件,网上流行的插件有两种,一种是ZeroClipboard.js,一种是clipboard.js。

插件下载地址:https://zenorocha.github.io

1.用ZeroClipboard.js插件需要用到以下三个文件:

ZeroClipboard.js

ZeroClipboard.min.js

ZeroClipboard.swf

这个插件需要浏览器的flash控件支持,复制时先把内容复制到flash里面,再利用flash将内容复制到

操作系统。flash控件又被淘汰的可能,有些浏览器上兼容得也不太好,所以这个插件不太好用。

2.用clipboard.js插件需要用到以下一个文件:

clipboard.min.js

执行复制功能的html标签上需要加上一个属性和一个样式,属性data-clipboard-text的值表示要复制的内容,

样式js-copy表示该标签被绑定上点击复制的功能,在点击该标签时触发复制功能。

该插件兼容IE、谷歌、火狐等浏览器。

js示例代码如下:

$("span").each(function(index,element){if(element.innerHTML=="复制")new Clipboard($(element).parent().attr("data-clipboard-text",Ext.fly(html).dom.innerText).addClass("js-copy")[0]);});

用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)的更多相关文章

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

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

  2. javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)

    使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...

  3. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. js实现复制内容

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

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

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

  6. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  7. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  8. 纯js实现复制内容到剪切板

    下面的方法可以完美实现: 复制指定input 或者 textarea中的内容: 指定非输入框元素中的内容 代码如下: function copyToClipboard(elem) { // creat ...

  9. tmux复制到windows剪贴板/粘贴板的坑

    以下所有操作都是在windows下面用putty连接linux centos6的情景下. 一直很纳闷为什么在tmux模式下不能把复制到的文字放到系统的粘贴板里面呢?通过层层阻碍,终于找到了原因. 去掉 ...

随机推荐

  1. chrome headless+selenium+python+(ubuntu 16.04/centos7) 下的实现

    Ubuntu 16.04 下: 0x01 安装chrome 1 下载源加入系统源列表 sudo wget http://www.linuxidc.com/files/repo/google-chrom ...

  2. 【网易官方】极客战记(codecombat)攻略-地牢-攻破突袭

    关卡连接: https://codecombat.163.com/play/level/hack-and-dash 通过加速药来逃离地牢精灵 简介: 空气中弥漫着危险的气息.你应该从地牢里逃出来. 但 ...

  3. 1+x证书Web 前端开发初级——理论考试(试卷1)

    1+x证书Web 前端开发初级——理论考试(试卷1) 一.单选题(每小题 2 分,共 30 小题,共 60 分) 1.HTML 语言中,设置表格中文字与边框距离的标签是() A.<table b ...

  4. main函数的参数详解

    1.定义 C语言规定main函数的参数只能有两个,习惯上这两个参数写为argc和argv.因此,main函数的函数头可写为: main (argc,argv)C语言还规定argc(第一个形参)必须是整 ...

  5. 从相亲的角度理解 K8S 的 Node Affinity, Taints 与 Tolerations

    这是昨天晚上阅读园子里的2篇 k8s 博文时产生的想法,在随笔中记录一下. 这2篇博文是 K8S调度之节点亲和性 与 K8S调度之Taints and Tolerations . 如果我们把 node ...

  6. c语言getipaddrtable获得ip地址与sendArp获得mac地址以及一些字节序问题记录

    https://docs.microsoft.com/zh-cn/windows/win32/api/iphlpapi/nf-iphlpapi-getipaddrtable msdn,有很多c的源码还 ...

  7. 【StarUML】组件图

    架构设计中可视化地表达各个组件之间依赖关系以及组件的接口调用情况 1.元素 a.组件 b.接口 b1.组件暴露接口 暴露接口,需要先画一个接口 然后建立组件和接口的联系,这里是暴露接口,那么这个连线就 ...

  8. JavaScript复习总结一(入门)

    总是执着想学各种框架,但忘了基础学好才最重要.每次打开菜鸟教程想重温基础内容,然后就像翻开英文字典,永远在abandon...还是需要做个笔记. 一来加深学习印象,二来等下次打开学习可以知道自己上次学 ...

  9. STA之AOCV

    为什么要引入AOCV 为了精确性,为了剔除悲观度.用set_timing_derate来设置OCV,对于一个固定的corner,只能对data/clock, cell/net, late/early分 ...

  10. android基础控件的使用

    控件在屏幕上位置的确定 通常情况下控件在屏幕上确定至少要连接两条线(一条水平,一条垂直) 如下图连接了四条线 辅助线 辅助线的调出: 水平辅助线:进入activity.xml的设计模式之后如下图 为了 ...