微信浏览器-复制到剪切板-clipboard.js插件

最新推荐文章于 2024-07-09 16:46:58 发布
最新推荐文章于 2024-07-09 16:46:58 发布
阅读量1w 收藏 6
点赞数 1
分类专栏： 微信开发 文章标签： 微信浏览器 拷贝到剪切板 clipboard
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baozhuona/article/details/78660531
版权
本文介绍了如何使用clipboard.js插件实现在微信浏览器中复制到剪切板的功能。该插件使用简单，只需引入并初始化即可实现一键复制，解决了微信浏览器对ZeroClipboard不支持的问题。
摘要由CSDN通过智能技术生成

之前写过一篇博客，介绍一个复制到剪切板的插件，ZeroClipboard，什么都hen好，然而就是不支持微信浏览器，我也没找到什么解决方案，我就严正拒绝了产品经理的需求。

直到今天被产品看到一个其他yin的h5，竟然可以实现复制到剪切板的功能，啪啪打脸~

看了下用了个叫clipboard.js的插件，用法超简单了

  • 引入插件
<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
  • html
    <div class=
最低0.47元/天 解锁文章
超级小码丽
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
自动复制内容_微信浏览器自动复制内容_
10-04
微信浏览器自动复制内容，不要手工点击，打开页面后自动复制相关内容。
vue中使用clipboard.js实现微信内H5页面复制内容到剪贴板（亲测 浏览器及Android、ios均可）
weixin_42864357的博客
12-17 1333
1、安装 npm install clipboard --save 2、文件内引入 import Clipboard from 'clipboard'; 3、添加复制按钮 复制的内容可以有三种情况： （1）、复制指定控件中能够的内容 <input type="text" id="input" /> <button ref="copy" data-clipboard-acti...
h5移动端实现一键复制功能
最新发布
qq_39826423的博客
07-09 388
h5移动端实现一键复制功能
html微信浏览器点击复制到剪贴板,JS实现点击复制到剪贴板，实测兼容所有浏览器（Chrome、QQ、微信、手机自带等） | 瑕疵学院 – 学习无瑕疵，成就有保障...
weixin_42131785的博客
06-04 456
引入jquery引入JS使用办法$.copy({imgUrl:"success-tips.png", //分享图标地址text:"复制成功", //分享提示文案copyUrl:"", //自定义复制链接地址tipTime:2000, //分享提示消失时间copyId:"#copy"//复制按钮id});多个同时使用var data = [{"url":"www.baidu.com",},{"url...
vue 适配微信浏览器 实现点击按钮复制文本 clipboard
qq_58340302的博客
05-13 3871
之前写的复制功能发现用微信打开的浏览器页面不生效，所以又换了种方法实现 首先，安装 clipboard npm install clipboard --save 然后，引入 clipboard import Clipboard from 'clipboard' 对被点击的文本或按钮绑定动态变量id="btn" :data-clipboard-text="scope.row.courseNo" <!-- 这里scope.row.courseNo是我要复制的内容 --> <.
iOS 微信内H5，复制文本到剪贴板失败
tengGongBoYe的博客
05-26 309
iOS 微信内H5 ，禁止在异步函数中，复制内容到用户剪贴板。同步情况下是可以的。uniapp 项目，发布为H5，用户点击按钮，发送网络请求，请求成功后，使用。将复制内容到剪贴板，移动到异步函数之外，比如不能放在请求的then函数中。安卓：微信内H5、外部浏览器（如UC浏览器）均正常复制。iOS：外部浏览器成功，微信内H5 失败。方法将文本复制到用户的剪贴板。
最近搞手机端的功能，分享个手机微信端复制的插件
weixin_30613433的博客
03-22 199
最近搞手机端的功能，分享个手机微信端复制的插件 https://clipboardjs.com/ 这个JS的插件，经过测试在微信端可以复制，欢迎大伙尝试 pos...
复制剪贴板兼容ios微信浏览器
weixin_34008805的博客
08-09 415
先贴踩坑经历, 需要代码直接下方提取。 复制首先想到的是execComand()方法, 于是代码如下: <body> <input id="inputTarget" type="text" name="" value=""> <button id="copyBtn" type="button" name="button">复制</bu...
js获取剪切板内容（企业微信内嵌网页）
Zhou1Monster的博客
12-01 1817
js获取剪切板内容剪切板内容获取腾讯会议获取url和会议号 剪切板内容获取 navigator.clipboard.readText().then( clipText => { console.log("复制内容：",clipText); }) 腾讯会议获取url和会议号 navigator.clipboard.readText().then( clipText => { console.log("复制内容：",clipText); const url = /(http:
浏览器中复制或剪切文本插件 clipboard.js
傲凝的博客
10-08 1758
插件说明 这是一个不依赖 flash，不依赖其他框架就能实现文本复制或剪切板的轻量级插件 官网地址：http://www.clipboardjs.cn/ 插件安装： 第一种：通过 npm 工具安装 npm install clipboard --save 第二种：GitHub 下载，然后引入 dist 文件夹下的 clipboard.min.js 下载地址：https:...
jQuery实现复制到粘贴板功能
10-20
jQuery实现复制到粘贴板的功能主要依赖于第三方插件ZeroClipboard。这个插件利用了Flash技术，因为Flash具备与系统剪贴板交互的能力，而JavaScript本身由于安全限制无法直接操作剪贴板。以下将详细介绍如何使用...
C# 复制图片 剪切板
01-11
在本案例中，我们关注的是使用C#语言实现从网页中复制图片并将其存储到剪切板，以便用户可以方便地在不同应用程序之间进行粘贴，如微信或QQ。以下是对这个主题的详细讲解： 首先，我们需要理解剪切板是什么。剪切板...
clipboard.js
易天海
08-14 2677
https://baike.baidu.com/item/Clipboard/3823870?fr=aladdin Clipboard是提取或替换Windows系统剪贴板的文本内容。 Clipboard() 语法Clipboard ( { string } ) 参数string：string类型，可选项，指定要复制到系统剪贴板上的文本。如果剪贴板上已有内容的话，该文本将取代剪贴板的当前内容...
js复制到粘贴板命令及第三方插件 clipboard 、ZeroClipboard
Quiet-Night的博客
08-15 6379
js复制到粘贴板命令 clipboard ZeroClipboard
解决手机微信公众号中的网页文字无法复制到剪切板问题
小孩子
10-21 6499
div,p,span{ -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } 直接上代码吧 最近在做公众号的功能，发现了一个问题就是在微信公众号里面的网页居然不能随意复制黏贴文字 查了一下别人家的就可以 所以在网上...
JS前端实现网页复制文本（兼容IOS端、微信浏览器 源码解析）
burgessbin的博客
04-12 1489
该方法在 **ios浏览器和微信浏览器** 中复制无效，判断navigator.clipboard是存在的，但就是writeText时出错，显示拒绝。使用第三方库，例如 `clipboard`
vue复制文案，复制图片，黏贴图片
兔子的博客
08-03 703
vue 实现复制文案，复制图片，在微信聊天框，黏贴为图片。
JS--微信浏览器复制到剪贴板实现
weixin_30561425的博客
09-25 920
由于太忙很久没写博客了，如有错误遗漏，请指出，感谢！ 首先这里要注意，是微信浏览器下的解决方案，其他浏览器请自行测试。 先说复制到剪贴板主要有什么使用场景： 优惠券优惠码，需要用户复制 淘宝商品，需要复制淘口令 由于淘宝链接无法在微信中打开，所以淘宝开发了淘口令方便物质传播，而导购网站在微信推广的时候也是生成口令，用户只需要复制口令，打开手机淘宝，即可看到对应的商品： ...
php clipboard.js,clipboard.js用html页面复制信息到剪切板
05-16
要使用 Clipboard.js 实现复制信息到剪切板，需要先在 HTML 页面中引入 Clipboard.js 库，例如： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script> ``` 接着，可以在页面中添加一个按钮或链接，并设置其 `data-clipboard-text` 属性为需要复制的文本内容，例如： ```html <button class="btn" data-clipboard-text="要复制的文本内容">复制到剪切板</button> ``` 最后，在 JavaScript 中初始化 Clipboard.js 实例，并通过 `new ClipboardJS()` 方法绑定到需要复制的按钮或链接上，例如： ```javascript <script> var clipboard = new ClipboardJS('.btn'); </script> ``` 完整的示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复制到剪切板</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script> </head> <body> <button class="btn" data-clipboard-text="要复制的文本内容">复制到剪切板</button> <script> var clipboard = new ClipboardJS('.btn'); </script> </body> </html> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值