基于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操作label给label赋值及取label的值示例
Nov 07 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
javascript常见用法总结
May 22 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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 db类库进行数据库操作
2009/03/19 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php使用curl访问https示例分享
2014/01/17 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
利用aardio给python编写图形界面
2017/08/21 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
后勤人员岗位职责
2013/12/17 职场文书
销售行政专员职责
2014/01/03 职场文书
乡下人家教学反思
2014/02/01 职场文书
诚信考试承诺书
2014/03/27 职场文书
银行求职信怎么写
2014/05/26 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
合作与交流自我评价
2015/03/09 职场文书
学校证明范文
2015/06/24 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server