网站开发过程中，经常需要点击复制指定内容的需求，网上搜索一下很多相关的JS复制代码，但兼容性都很差，很多浏览器都不支持。

虾技派找到一款非常好用的复制插件分享给大家。

clipboard.js是一个不依赖 Flash,将文本复制到剪贴板的插件，仅仅 2kb。

为什么有clipboard.js

将文本复制到剪贴板应该不难。它不应该需要数十个步骤来配置或数百个KB来加载。但最重要的是，它不应该依赖于Flash或任何臃肿的框架。

这就是剪贴板存在.js的原因。

开始使用

下载clipboard.js页面引用

<script src="dist/clipboard.min.js"></script>

或者直接引用cdn的

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

现在，您需要通过传递DOM选择器， HTML元素或HTML元素列表来实例化它。

new ClipboardJS('.btn');

实例：

<button class="btn" data-clipboard-text="这里是要被复制的内容">点击复制</button>

事件：

如果我们需要一些反馈，比如点击复制时弹出提醒

<button class="btn-copy" data-clipboard-text="这里是要被复制的内容">点击复制</button>
<script>
var clipboard=new ClipboardJS('.btn-copy');
clipboard.on('success', function(e) {
  alert('已经复制到剪切版');
});
clipboard.on('error', function(e) {
  console.log('复制失败');
});
 </script>

高级用法：

如果您不想修改HTML，可以使用一个非常方便的命令性API。您需要做的就是声明一个函数，执行您的操作，然后返回一个值。

例如，如果要动态设置 ，则需要返回 Node。target

new ClipboardJS('.btn', {
    target: function(trigger) {        return trigger.nextElementSibling;
    }
});

如果要动态设置 ，将返回一个字符串。text

new ClipboardJS('.btn', {
    text: function(trigger) {        return trigger.getAttribute('aria-label');
    }
});

要在 Bootstrap Modals 中使用，或与任何其他更改焦点的库一起使用，您需要将焦点元素设置为值。container

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

此外，如果您使用的是单页应用程序，则可能需要更精确地管理 DOM 的生命周期。下面介绍了如何清理我们创建的事件和对象。

var clipboard=new ClipboardJS('.btn');
clipboard.destroy();

浏览器支持

此库依赖于Select和execCommand API。所有浏览器都支持第一个，而以下浏览器支持第二个浏览器。

轻快、可直接播放的 GIF 小动画很适合嵌入图文。

但是很多图文编辑器复制粘贴 GIF 图像都会出现问题。例如粘贴GIF 变成一帧静态图像，或提示无效图像，或粘贴正常但发布上传时报错 …… 然后我们只能挨个 GIF 都重复一遍：录屏 > 压缩 > 保存 > 添加图像 > 上传 > 插入文章 ……

使用极简录屏软件 Gif123 可以大幅简化上面的操作：Gif123 可以一键录屏，一键复制动画，在图文编辑器里 Ctrl +Ｖ 一下粘贴动画就可以解决所有问题。Gif123 复制的 GIF 格式拥有良好的兼容性，不会动画变静态图像，不会提示无效图像，上传时不会报错。

Gif123 简介

Gif123 是一个开源软件，体积很小只有 755KB，独立 EXE 无任何外部依赖，兼容 Windows XP，Vista，Win7，Win8，Win10，Win11 …… 等所有流行桌面操作系统。

软件极简单，只有 3 个主要按钮：录制、预览、复制。

Gif123 主窗口就是录屏选框，可拖动选框选择要录制的区域。相比很多更复杂更强大的 GIF 录制工具，Gif123 的操作非常简单，一看就会。

Gif123 虽然很小，但是在 GIF 有限的颜色限制下仍然可以显著提升画质。录制完成以后可自动调用强悍的 Gifsicle 压缩 GIF 文件体积。并且在高分屏下可自动压缩 GIF 至正常分辨率 —— 以避免浏览图像时重复放大。

Gif123 可录制合成鼠标轨迹，可调整鼠标指针大小，可在设置中打开鼠标指针高亮光圈功能，高亮光圈可跟随鼠标移动以指示鼠标位置，单击鼠标时会显示动画光圈( 光圈颜色透明度为0 时仅显示单击动画 )：

按左键光圈就会向左侧压缩成半圆，按右键光圈就会向右侧压缩成半圆，按中键就会向内侧缩小为小圆。很多录屏软件仅用颜色区分左右按键 —— 说实话这可能只有录屏的人明白，看动画的人估计分不清。

Gif123 最小化时按录屏热键可显示快速选框：

切换到预览模式且暂停后可编辑动画帧，在预览动画上点右键可弹出菜单，可以暂停动画帧（ 在图像上按回车可以快速「暂停 / 继续」播放动画 ），动画暂停状态下可以使用鼠标滚轮、帧滑块控件、Page Up/Down ……等手动翻页，暂停状态可以方便地抽帧删帧。

预览模式可在上图界面底部的输入框中重新设置优化参数。在参数输入框中点任何一个参数的任何位置，按鼠标滚轮可以快速调整数值，如下图：

可实时预览优化效果与优化后的文件体积。重新优化总是基于原始图像 —— 上次优化设定不会影响当前优化效果。

我为什么要开发 Gif123

Gif123 是我使用 aardio 开发的。至于 aardio 也是我开发的编程语言。关于 aardio 请参考文章：2022年，开发独立 EXE 桌面应用程序，用什么语言、技术合适

GIF 还是非常有用的，很多时候我们需要这种小、简单、不复杂又够用的东西。GIF 录屏的工具虽然很多，但是用着用着有时候就发现不需要的功能很多，需要的功能它又没有或者不方便，所以我决定自己用 aardio 写一个，实际上要不了几句代码。

开发经验分享：揭开剪贴板的秘密

GIF 录制好了，我们一般当然是复制并分享了，如果我们打开图像再去复制还是有些麻烦，能一键复制多好。但是这个看起来简单的事 —— 还真是有些麻烦，首先系统剪贴板其实并不支持 GIF 图像，所以很多软件里复制 GIF 只复制了第一帧。

但是我们发现 IE 是可以复制GIF的，有的文章说通过复制HTML就可以了，用 aardio 来写实际上就是这样：

import win.clip.html;
var html=win.clip.html();
html.write(`<img src="c:\test.gif" />`)

网上很多文章都这么写，但实际上根据我的测试，这样复制 GIF 以后浏览器或者其他一些软件里并不能粘贴。

这个其实可以理解，浏览器是没有权限访问本地文件的，即使他得到了剪贴板中的HTML，也没有权限去读任意位置的本地文件，考虑到了这一点，我决定把本地图像转换为 Data URL 直接嵌入HTML，主要代码如下：

import win.clip.html;
import crypt;

var html=win.clip.html();
var dataUrl=string.format('data:image/gif;base64,%s'
  ,crypt.encodeBin( string.loadBuffer(filePah),,0x40000001/*_CRYPT_STRING_BASE64*/) ); 
  
html.write(`<img src="`+ dataUrl+`" />`,,false);

上面的代码实现了以后，我在浏览器图文编辑器里测试了一下，用这种方法复制一个 GIF 文件以后，再到编辑器里 Ctrl + V 粘贴，看到了 GIF 动画在编辑器里显示出来了，还没高兴零点几秒，弹出一个错误信息：粘贴图像失败。看了一下是远程错误，猜测他把这个当作普通远程图像地址去处理了。

然后在其他聊天软件里试着粘贴了一下，也没任何反应。看来此路不通。看到有人说可以复制为 CF_HDROP 格式，好吧，aardio 干这事倒也方便，代码如下：

import win.clip.file;
win.clip.file.write( filePath );

其实这等价于在资源管理器里右键复制文件。用上面的方法复制了图像以后，到聊天软件里粘贴试了一下，粘贴出来的是一个文件图标，并没有认出是 GIF 动画。

想起之前看到有人说：

IE 能复制 GIF，但是在剪贴板里看到的只是静态的 BMP 图像，不知道 IE 是如何实现的，

难道 ……

于是试着在剪贴板里先复制 GIF 第一帧的静态图像，再复制文件本身（同时复制2种格式），用这种方法复制了一个 GIF 图像，然后到 聊天工具里粘贴，这回粘贴出来的还真是 GIF 动画 ，直接就显示预览动画了 —— 完美！

然后打开浏览器编辑器，试着粘贴了一下，遇到2种不同的反应，第1种是出现了静态图像 —— 没动画，第2种是静态图像也没有，细节没有深究。想起之前复制 Data URL 失败的过程，这难道是 …… 于是赶紧换第 3 种方法，复制第一帧静态图像，复制文件，然后再复制 Data URL ，一气呵成三连击以后终于成功了，浏览器编辑器里完美粘贴出来 GIF 动画，试了很多软件以及图文编辑器也都能完美支持。

于是，我又加了一个库 win.clip.gif，用起来就太简单了：

import win.clip.gif;
win.clip.gif.write( filePath );

您看这就是 aardio 的好处了，像这种库一天能写一打出来，再复杂的代码都可以简化，这得益于 aardio 良好的模块化支持。

言

作为一名资深搬砖工，你要问我用得最熟练的技能是什么，那我敢肯定且自豪的告诉你：是 Ctrl+C ！是 Ctrl+V！

不信？你来看看我键盘上的 Ctrl、C 和 V 键，那油光发亮的包浆程度，不盘个三五年是绝对达不到的！

编程界的江湖上曾经流传着一句话：CV da fa 好，CV da fa 妙！主要看疗效，谁用谁知道！（为防河蟹，且用拼音凑合着）

从这句话就可以看出编程界的同仁们对 CV 的追捧和狂热，简直是席卷大街小巷、风靡大江南北！一时之间，不知让多少 IT 英雄们“竞折腰”，即使到了现在，它依然是编程入门的必修技能！

那么，CV 到底有什么魔力，能让人这么着迷，一代又一代的传承不息呢？

今天，让我们一起来揭开前端 JavaScript 开发界 CV 的面纱，一睹真容（套路）！

旧法

世界上最好的语言—— JavaScript，必然是有着访问系统剪切板的功能的，主要依靠 Document.execCommand() 接口实现复制、粘贴、剪切等功能。

• document.execCommand('copy')
• document.execCommand('cut')
• document.execCommand('paste')

复制

const inputEle=document.querySelector('#input');
inputEle.select();
document.execCommand('copy');

首先获取到这个 input 元素，然后选中 input 中的内容，再调用复制接口，将 input 内容复制到剪切板。

注意，复制操作最好放在事件监听函数里面，由用户触发（比如用户点击按钮）。

粘贴

const pasteText=document.querySelector('#output');
pasteText.focus();
document.execCommand('paste');

首先让 input 元素获得焦点，然后调用粘贴接口，将剪切板内容粘贴到 input。

剪切

用法同复制。

小结

从上面的示例来看，剪切板 API 用着很简单，但它有以下不足：

1. 它不够灵活，只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。
2. 它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。
3. 有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。

进化 ——Clipboard

为了使 JavaScript 更加灵活的操作剪切板，也是为了顺应 JS 发展的历史潮流，Clipboard API 应运而生。它是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，就能提供系统剪贴板的读写访问。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。

基本使用

navigator.clipboard 属性返回 Clipboard 对象，所有操作都通过这个对象进行。

(async ()=> {
    const text=await navigator.clipboard.readText();
    console.log(text);
})();

如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。

安全限制

1. Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。
2. 调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API，跟剪贴板相关的有两个权限：clipboard-write（写权限）和clipboard-read（读权限）。“写权限”自动授予脚本，而“读权限”必须用户明确同意给予。也就是说，写入剪贴板，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取。

脚本读取的总是当前页面的剪贴板。这带来的一个问题是，如果把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。

如果用户没有适时使用 Permissions API) 授予相应权限和"clipboard-read" 或 "clipboard-write" 权限，调用 Clipboard 对象的方法不会成功。

方法

Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象。

• read() 从剪贴板读取数据（比如图片），返回一个 Promise对象。
• readText() 从操作系统读取文本，返回一个 Promise对象。
• write() 写入任意数据至操作系统剪贴板。
• writeText() 写入文本至操作系统剪贴板。

浏览器兼容性

目前，各个浏览器厂商正在逐步开始支持 Clipboard 对象及其方法，兼容性如下：

总结

对上面所说的做一个总结：

1. Clipboard 对象的方法，返回一个 Promise 对象
2. Clipboard 的使用存在一定的安全限制，需要注意。
3. 在控制台运行 Clipboard 可能会报错。

~

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！