基于js实现复制内容到操作系统粘贴板过程解析


Posted in Javascript onOctober 11, 2019

一、如果只考虑IE浏览器,可以直接用原声js实现(兼容IE、谷歌、火狐等浏览器)

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]);});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
js单例模式详解实例
Nov 21 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
js css自定义分页效果
Feb 24 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
ES6之Proxy的get方法详解
Oct 11 #Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 #Javascript
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
JavaScript实现抖音罗盘时钟
Oct 11 #Javascript
javascript刷新父页面方法汇总详解
Oct 10 #Javascript
element form 校验数组每一项实例代码
Oct 10 #Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
解析Python中while true的使用
2015/10/13 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python内置函数OCT详解
2016/11/09 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
土木工程专业自荐信
2013/10/04 职场文书
低碳生活倡议书
2014/04/14 职场文书
关于环保的建议书
2014/05/12 职场文书
全运会口号
2014/06/20 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
教育见习报告范文
2014/11/03 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书