基于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 简单应用示例总结
Aug 09 Javascript
js onclick事件传参讲解
Nov 06 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
小程序中设置缓存过期的实现方法
Jan 14 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
附件名前加网站名
2008/03/23 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
Use Word to Search for Files
2007/06/15 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
js计算精度问题小结
2013/04/22 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
Jquery把获取到的input值转换成json
2017/05/15 jQuery
echart简介_动力节点Java学院整理
2017/08/11 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
艺术设计专业个人求职信范文
2013/12/11 职场文书
文秘大学生求职信
2014/02/25 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年教研工作总结
2014/12/06 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS