Async Clipboard API来了
如果我问:你知道“剪贴板”(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()
相应地,原理也只有两步。