基于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常用函数 不错
Sep 08 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
Preload基础使用方法详解
Feb 03 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
JavaScript实现淘宝商品图切换效果
Apr 29 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
python实现RSA加密(解密)算法
2016/02/17 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python创建学生管理系统
2019/11/22 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
django 模型字段设置默认值代码
2020/07/15 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
二手书店创业计划书
2014/01/16 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
工程部部长岗位职责
2015/02/12 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
生日祝酒词大全
2015/08/10 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
MySQL 语句执行顺序举例解析
2022/06/05 MySQL