浏览器实现复制内容到剪贴板 -- clipboard.js

最新推荐文章于 2023-01-13 17:55:19 发布
最新推荐文章于 2023-01-13 17:55:19 发布
阅读量541 收藏
点赞数
分类专栏： javaWeb 文章标签： 浏览器 剪贴板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J_Sylar/article/details/78553154
版权

因为产品涉及到分销以及分销统计之类的  需要根据分销者角色产生便于识别和统计的分销链接。因此后台管理系统在支持显式手动复制时也做了复制功能按钮，便于用户直接点击复制


1、引入clipboard.js   我引入的是clipboard.min.js

http://www.bootcdn.cn/clipboard.js/


2、填充



绑定事件： 准备工作都做好之后,作开始使用的是e.clearSelection()方法  但是短时间内频繁点击事件 会导致多条成功弹框

于是选择使用destroy()方法  



3、演示效果



网上可以搜到很多教程的   之前不知道是不是不细心   clipboard的多种复制方法一直未成功  索性只选择了这种

J_Sylar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nuxt-clipboard:Nuxt.js 的“复制到剪贴板”模块，使用 vue-clipboard2
07-24
Nuxt.js 的“复制到剪贴板”模块，使用 :recycling_symbol: 设置 使用 yarn 或 npm 将nuxt-clipboard依赖项添加到您的项目中 添加nuxt-clipboard到modules的部分nuxt.config.js export default { modules : [ /...
Clipboard 剪贴板学习笔记
黄彪博客
01-05 1611
Clipboard.read()方法用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。ClipboardItem 接口是对剪切板里的内容的抽象，比如我们选中网页上的一段文字，并右击选择复制，Clipboard.write()方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。用户使用剪贴板数据，进行粘贴操作时，会触发paste事件。
浏览器中如何实现拷贝到剪贴板功能
油墨香^-^的博客
01-13 801
它一般可以使用第三方库 clipboard-copy 来实现，源码很简单，可以读一读目前最为推荐的方式是使用进行实现而对于一些不支持的浏览器，使用以下 API 进行复制选中:复制:(已被废弃)
记一个vue开发问题-----js如何从浏览器剪贴板获取内容
weixin_44092905的博客
09-16 1377
记一个vue开发问题-----js如何从浏览器剪贴板获取内容 最近公司开始了一个新项目，由于人手不够，让我一个搞qt的负责前端开发部分，内心简直一千匹马奔腾，但是想了想多学点儿东西总是好的，很多项目经理也都是前后端通吃，而且本人以前也做过网站，多学点儿东西总是好的。不多说了，讲问题吧。 -------->>>js如何获取浏览器剪贴板里边的内容 上网找了半天，都是讲如何复制内容 到浏览器剪贴板里边。 而且有些同学使用方式本地测试又不行，例如： 通过 window.clipboardData.
js：浏览器获取剪切板内容
老君的博客
11-08 3798
使用示例 const TEXT = navigator.clipboard.readText(); TEXT.then(text => { console.log("剪切板内容：" + text); // 操作完之后，可以写空值到剪切板，防止下次还是相同数据 navigator.clipboard.writeText(''); }).catch(err => { console.error('Failed to read clipboard contents: ', err); });
在浏览器中实现复制内容到剪贴板
weixin_43093394的博客
08-18 973
前端开发时， 经常有这种功能， 需要把网页中的有些内容复制到剪切板中。 IE： 实现起来有clipboardData 对象可以使用 其他浏览器： document.queryCommandSupported 直接上代码： copyLink(text) { if (window.clipboardData && window.clipboardData.setData) { // IE specific code path to prevent textarea bein
兼容主流浏览器的JS复制内容到剪贴板
12-10
现在浏览器种类也越来越多，诸如 IE、Firefox、Chrome、Safari等等，因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了。 在FLASH 9 时代，有一个通杀所有浏览器的js复制内容到剪贴板的方案： ...
copy-to-clipboard:使用JS将内容从浏览器复制到剪贴板
05-23
复制到剪贴板 简单的模块公开copy功能，该功能将尝试使用并回IE特定的clipboardData接口，并最终求助于具有适当文本内容和消息的常规prompt 。 例子 import copy from 'copy-to-clipboard' ; copy ( 'Text' ) ; //...
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
10-22
主要介绍了Zero Clipboard实现浏览器复制到剪贴板的方法,带有多个复制按钮效果,涉及jQuery插件ZeroClipboard.js具体使用步骤与相关技巧,需要的朋友可以参考下
clipboard-copy:轻量级复制到Web的剪贴板
04-28
该软件包的目的是在现代Web浏览器中使用最少的字节数提供简单的“复制到剪贴板”功能。 为此，此程序包仅支持现代浏览器。 没有使用Adobe Flash的后备，也没有黑客。 只需30行代码。 与其他实现不同，使用clipboard...
兼容各浏览器的复制内容到剪切板
04-19
NULL 博文链接：https://meng-fw.iteye.com/blog/1880638
浏览器内容复制到系统剪贴板的脚本
12-19
浏览器内容复制到系统剪贴板的脚本，支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+；
ZeroClipboard解决跨浏览器复制到剪贴板的问题
01-19
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。
复制到剪切板（浏览器兼容）
08-10
复制到剪切板（浏览器兼容）
js调用浏览器的复制功能复制内容到剪切板
jyn15159的博客
09-19 2013
浏览器复制功能，js调用浏览器的复制功能实现复制文本内容到剪贴板
JS使用clipboard调用浏览器的复制
小火车况且况且况且的博客
02-16 631
JS使用clipboard调用浏览器的复制 因为execCommand的废弃,导致使用后在部分浏览器无法生效的问题 因此改为clipboard方法MDN说明 使用\n可以实现字符串的换行 const writeText = `开发资源名称:${this.xqzrFormInfo.resourForm.pubResName}\n` navigator.clipboard.writeText(writeText).then(()=> { alert("复制成功") }, (error)=>
在浏览器中实现复制内容到剪切板中
oscar999的专栏
06-21 1万+
前端开发时， 经常有这种功能， 需要把网页中的有些内容复制到剪切板中。 针对IE浏览器来说， 实现起来就很简单， 因为直接有clipboardData 的对象可以使用， 但是对于其他浏览器来说， 并没有这个对象， 如何实现， 目前比较多的解法都是借助flash。 除此之外，这个功能如果应用在Extjs 中该如何实现。（目前为止， Extjs 本身并没有提供相关的方法）
万能的“一键复制到剪贴板”，支持IE、火狐、谷歌及移动版浏览器
JustinLiu的博客
03-15 1万+
万能的“一键复制到剪贴板”，支持IE、火狐、谷歌及移动版浏览器
一段js实现复制文本内容到剪切板
热门推荐
csx blog
08-23 3万+
直接上代码：<script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.value =
nodejs如何复制内容到剪贴板
最新发布
05-30
在 Node.js 中，可以使用 `clipboardy` 模块来复制内容到剪贴板。具体的步骤如下： 1. 安装 `clipboardy` 模块，可以使用 npm 命令进行安装： ``` npm install clipboardy ``` 2. 在需要复制内容的 JavaScript 文件中引入 `clipboardy` 模块： ```javascript const clipboardy = require('clipboardy'); ``` 3. 调用 `clipboardy.writeSync` 方法，将需要复制的内容作为参数传入： ```javascript clipboardy.writeSync('需要复制的内容'); ``` 这样就可以将内容复制到剪贴板中了。 注意，`clipboardy` 模块只能在 Node.js 环境下使用，不能在浏览器中使用。如果需要在浏览器中复制内容到剪贴板，可以使用浏览器提供的 `Clipboard API`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值