clipboard.js——兼容各种版本浏览器的剪切板库

最新推荐文章于 2024-08-08 07:07:56 发布
最新推荐文章于 2024-08-08 07:07:56 发布
阅读量5.8k 收藏 1
点赞数
分类专栏： js 文章标签： js clipboard.js javascript 剪切板 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lg346426260/article/details/56708340
版权

需求:

我们在浏览网站时,通常有复制某段关键性文本的需求,一般情况下,我们是选中这段文本,然后ctrl + c 进行复制,但是人总是很懒的,比如说我,连这两个操作都不愿意做,我仅仅只想把点击一下某个按钮或者点击下改文本就可以复制到剪切板,这样可以节约我的时间.


解决方案:

将文本复制到剪切板是前台js的事,但是浏览器众多,怎么才能兼容各种版本的浏览器,让我们轻松写出一键复制到剪切板的js代码.这时就该clipboard.js出场了 .

clipboard.js是一个github上的开源项目，clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

clipboard.js项目主页:https://github.com/zenorocha/clipboard.js

最低0.47元/天 解锁文章
_路人_
关注
专栏目录
浏览器中复制或剪切文本插件 clipboard.js
傲凝的博客
10-08 1797
插件说明 这是一个不依赖 flash，不依赖其他框架就能实现文本复制或剪切板的轻量级插件 官网地址：http://www.clipboardjs.cn/ 插件安装： 第一种：通过 npm 工具安装 npm install clipboard --save 第二种：GitHub 下载，然后引入 dist 文件夹下的 clipboard.min.js 下载地址：https:...
Clipboard-polyfill：在Web上简单复制，具有最大的浏览器兼容性
02-05
clipboard-polyfill 使在网络上复制变得容易： clipboard.writeText("hello world"); 该库是现代基于Promise的的polyfill。 注意：自2020年6月下旬起，您可以在所有主要浏览器的稳定版本中使用navigator.clipboard.writeText("hello world); （请参阅下文了解兼容性）。仅当您1）需要时，此库才对您有用复制text/html ，或2）需要定位较旧的浏览器。 用法 如果使用npm ，请安装： npm install clipboard-polyfill 将文本复制到剪贴板的示例应用程序：
clipboard.js 使用教程
最新发布
gitblog_00814的博客
08-08 352
clipboard.js 使用教程 clipboard.js:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:项目地址:https://gitcode.com/gh_mirrors/cl/clipboard.js 项目介绍 clipboard.js 是一个轻量级的 JavaScript 库，用于实...
兼容ios和安卓的复制插件(clipboard.js)
Zyl_CN的博客
05-16 1059
首先js的引入 <script src='./clipboard.min.js'></script> 2个元素的复制呼应 <div class='copydiv'> <p>链接：<span id='urlSpan'>http://www.10pinping.com/vote...</span></p&...
Js Vue 一键复制文本内容 - clipboard.js（兼容谷歌等主流浏览器）- 附完整示例
m0_48968874的博客
07-03 3792
前端 vue js 一键复制文本内容 - clipboard.js（兼容谷歌等主流浏览器）
clipboard.js兼容ios
weixin_30629653的博客
03-22 393
再使用clipboard.js做项目时，项目需求是在非input,button等可以点击的标签（span，p，div）上实现点击来复制内容，在PC端和移动端android没问题，但是到了ios毫无反应，就是渣渣，调兼容调了好大一会儿，总算解决了这个bug，现在把方法分享给大家， 其实不算复杂，主要是给标签添加样式，就是自己不知道ios系统的标签特性： 一开始的html代码如下： <...
ZeroClipboard实现兼容各浏览器复制功能一款jquery插件
Smart_IceBoy的博客
02-16 450
ZeroClipboard是利用flash为媒介实现兼容各浏览器复制功能一款jquery插件(测试通过浏览器IE6-8/chrome27/firefox22/safari 5.1.5/opera12.12)，通过简单的调用实现复制功能 官网地址：http://zeroclipboard.org/
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
10-20
总的来说，本文讲述了使用JavaScript和Html5，通过引入clipboard.js库来实现在网页上按钮复制文字到剪切板的功能，并考虑了手机设备特别是iOS和Android平台上的兼容性。这是一个很实用的技术，适用于各种需要在网页...
复制到剪切板（浏览器兼容）
08-10
总之，"复制到剪切板（浏览器兼容）"涉及到Web开发中的剪切板API和兼容性处理，`Clipboard API`是现代的标准方法，而`clipboard.js`库则为旧版浏览器提供了兼容性解决方案。通过合理使用这些工具和方法，我们可以...
兼容浏览器的单击按钮复制到剪切板
05-17
在提供的压缩包文件“兼容浏览器的flash复制”中，很可能包含了实现这种兼容性策略的代码，包括JavaScript文件、Flash SWF文件，以及可能用于整合这两者的示例或库。开发者可以参考这些文件，以便在自己的项目中实现...
clipboard复制当前链接/网址/url ,兼容所有浏览器，移动端也适用
03-22
兼容所有浏览器，复制当前网址，不需要flash，简单易用，手机浏览器同样适用
clipboard.js 开发版本
09-30
开发版本的clipboard.js 可以直接使用
使用clipboardjs实现仿CSDN的代码复制功能
01-24
使用clipboardjs实现仿CSDN的代码复制功能v2版本，博文地址：https://blog.csdn.net/CSDNVIP2011/article/details/86595690
clipboard.min.js下载
05-24
JS实现clipboard.min.js下载， 实现复制粘贴功能
前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
编程三昧
06-22 701
前言 作为一名资深搬砖工，你要问我用得最熟练的技能是什么，那我敢肯定且自豪的告诉你：是 Ctrl+C ！是 Ctrl+V！ 不信？你来看看我键盘上的 Ctrl、C 和 V 键，那油光发亮的包浆程度，不盘个三五年是绝对达不到的！ 编程界的江湖上曾经流传着一句话：CV da fa 好，CV da fa 妙！主要看疗效，谁用谁知道！（为防河蟹，且用拼音凑合着） 从这句话就可以看出编程界的同仁们对 CV 的追捧和狂热，简直是席卷大街小巷、风靡大江南北！一时之间，不知让多少 IT 英雄们“竞折腰”，即使到了现在，它
clipboard低版本浏览器兼容性问题
Bynine9的博客
05-27 218
navigator.clipboard兼容性不是很好，低版本浏览器不支持。
JS复制到剪切板（兼容主流所有浏览器）
晨晓溪风丶
09-01 4560
1、主要用到github上的一个开源的项目：clipboard.js 2、clipboard.js 可以实现纯JS复制数据到剪切板中（无需flash支持）跟现在主流的zeroclipboard 比起来方便了不止一点两点（毕竟不是所有人都会装flash插件的） 下面写一些DEMO来记录一下学习：首先引入依赖JS包：<script src="../clipboard.min.js"></scrip
使用clipboard.js实现页面内容复制到剪贴板
ygxq1990的博客
04-10 409
clipboard.js是一个github上的开源项目，可以实现纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。 1、访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js 2、下载clipboard.min.js，并在页面中引用 [html] view plain c
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> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值