基于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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
动态加载jQuery的方法
Jun 16 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JS正则表达式验证密码强度
Mar 18 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
详解JavaScript的策略模式编程
2015/06/24 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
了解重排与重绘
2019/05/29 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python如何将图片转换为字符图片
2020/08/19 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python实现吃苹果小游戏
2020/03/21 Python
python实现梯度下降法
2020/03/24 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
物理力学求职信
2014/02/18 职场文书
大学生个人自荐信
2014/02/24 职场文书
员工安全生产承诺书
2014/05/22 职场文书
个人融资协议书
2014/10/02 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电