如果我问：你知道“剪贴板”（clipboard）吗？

恐怕没人不知道。我们每天都不知道自己要在电脑或手机上“复制”、“粘贴”多少回。每次“复制”、“粘贴”的背后，都会用到“剪贴板”。

根据“维基百科”：

The clipboard is a data buffer used for short-term data storage and/or data transfer between documents or applications used by cut, copy and paste operations and provided by the operating system.

翻译一下：

剪贴板是一种数据缓存，用于文档或应用间短期数据的存储/转移，在用户执行剪切、复制和粘贴操作时会用到，由操作系统提供。

这里最重要的一点在于，“剪贴板”是“由操作系统提供”的，因此它是系统级的一个软件特性。

对于前端开发者来说，如果我问：你知道怎么操作“剪贴板”吗？

很多人的第一反应可能是：使用clipboard.js吧……

clipboard.js的原理

clipboard.js（https://clipboardjs.com/）是在Github上有24000多个星，其流行程度可见一斑。关于这个库的用法，大家可以自己去看，我们这里主要分析其实现原理，以便了解目前操作剪贴板的主流技术。

简单来说，clipboard.js利用了两个已有的Web API（前者属于HTML5，后者属于HTML Editing API）：

• HTMLInputElement.select()
• document.execCommand()

相应地，原理也只有两步。

- 阅读剩余部分 -