基于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性能最佳实践的讨论,与求教
Mar 30 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
JS实现简单抖动效果
Jun 01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
JS实现小球的弹性碰撞效果
Nov 11 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
js常用正则表达式集锦
May 17 Javascript
Vue前端项目部署IIS的实现
Jan 06 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的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
python关闭占用端口方式
2019/12/17 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
行政专员工作职责
2013/12/22 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
决心书标准格式
2014/03/11 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
增员口号大全
2014/06/18 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
python 镜像环境搭建总结
2022/09/23 Python