基于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调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
几种响应式文字详解
May 19 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
护理学专业推荐信
2013/12/03 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
公路绿化方案
2014/05/12 职场文书
经典团队口号大全
2014/06/21 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS