基于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 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
基于jquery实现五星好评
Nov 18 jQuery
微信小程序封装分享与分销功能过程解析
Aug 13 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结束标签的使用细节探讨及联想
2013/03/04 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python爬取成语接龙类网站
2018/10/19 Python
python实现简单名片管理系统
2018/11/30 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
测试工程师职业规划书
2014/02/06 职场文书
专业见习报告范文
2014/11/03 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
Go语言grpc和protobuf
2022/04/13 Golang