基于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基本语法分析说明
Jun 15 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
javascript数据类型验证方法
Dec 31 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
关于layui 下拉列表的change事件详解
Sep 20 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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数据库类
2009/05/27 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python多进程重复加载的解决方式
2019/12/13 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
应聘面试自我评价
2014/01/24 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
法人授权委托书范本
2014/04/04 职场文书
工作简报怎么写
2015/07/21 职场文书
公司岗位说明书
2015/10/08 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers