基于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实现简单模态窗口,背景灰显
Nov 14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 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
基于mysql的论坛(7)
2006/10/09 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
百度地图自定义控件分享
2015/03/04 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Python3爬虫学习入门教程
2018/12/11 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python API自动化框架总结
2019/11/12 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python 带时区的日期格式化操作
2020/10/23 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Linux机考试题
2015/10/16 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
结婚邀请函范文
2014/01/14 职场文书
一岗双责责任书
2014/04/15 职场文书
车辆转让协议书
2014/04/15 职场文书
保证书范文大全
2014/04/28 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
党员转正申请报告
2015/05/15 职场文书
关于观后感的作文
2015/06/18 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
python中pycryto实现数据加密
2022/04/29 Python