基于js实现复制内容到操作系统粘贴板过程解析

 更新时间:2019年10月11日 09:50:18   作者:德邦总管  
这篇文章主要介绍了基于js实现复制内容到操作系统粘贴板过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、如果只考虑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中Array实例方法map的实现方法

    JavaScript中Array实例方法map的实现方法

    这篇文章主要介绍了JavaScript中Array实例方法map的实现方法,map() 方法创建一个新数组,其结果是原数组中的每个元素都调用一个提供的函数后返回的结果,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-03-03
  • uniapp实现可滑动选项卡

    uniapp实现可滑动选项卡

    这篇文章主要为大家详细介绍了uniapp实现可滑动选项卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript demo 基本技巧

    javascript demo 基本技巧

    js下的一些小技巧,需要的朋友可以下。
    2009-12-12
  • 微信小程序获取手机网络状态的方法【附源码下载】

    微信小程序获取手机网络状态的方法【附源码下载】

    这篇文章主要介绍了微信小程序获取手机网络状态的方法,涉及微信小程序wx.getNetworkType函数检查网络连接状态的相关使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • JS前后端实现身份证号验证代码解析

    JS前后端实现身份证号验证代码解析

    这篇文章主要介绍了JS前后端实现身份证号验证代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    这篇文章主要介绍了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果,可实现鼠标滑过菜单项呈现弹性移动显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • javascript 限制输入脚本大全

    javascript 限制输入脚本大全

    javascript限制输入脚本大全 ,方便网页设计的朋友经常能用的到,建议收藏下。代码有点慢,大家慢慢看啊。
    2009-11-11
  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    这篇文章主要介绍了javascript数组遍历的方法,结合实例形式分析了javascript数组遍历及相关的some、every、filter、map等方法的使用技巧,需要的朋友可以参考下
    2016-09-09
  • jquery 滚动条事件简单实例

    jquery 滚动条事件简单实例

    这篇文章介绍了jquery滚动条事件的简单实例,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript实现密码框输入验证

    JavaScript实现密码框输入验证

    这篇文章主要为大家详细介绍了JavaScript实现密码框输入验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论