基于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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Javascript获取某个月的天数
May 30 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 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
PHP4中实现动态代理
2006/10/09 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Django 中 cookie的使用
2017/08/17 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python中for循环详解
2014/01/17 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Keras自定义IOU方式
2020/06/10 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
学习2014年全国两会心得体会
2014/03/12 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年教务工作总结
2014/12/03 职场文书
维稳承诺书
2015/01/20 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python