基于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 相关文章推荐
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js单词形式的运算符
May 06 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
Openlayers实现图形绘制
Sep 28 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js倒计时小程序
2013/11/05 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python线程优先级队列知识点总结
2021/02/28 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
中学音乐课教学反思
2016/02/18 职场文书
python实现简单区块链结构
2021/04/25 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python