当前位置 博文首页 > 隐逸王:前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 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 用着很简单,但它有以下不足:
为了使 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。
localhost
)允许使用非加密协议。clipboard-write
(写权限)和clipboard-read
(读权限)。“写权限”自动授予脚本,而“读权限”必须用户明确同意给予。也就是说,写入剪贴板,脚本可以自动完成,但是读取剪贴板时,浏览器会弹出一个对话框,询问用户是否同意读取。脚本读取的总是当前页面的剪贴板。这带来的一个问题是,如果把相关的代码粘贴到开发者工具中直接运行,可能会报错,因为这时的当前页面是开发者工具的窗口,而不是网页页面。
如果用户没有适时使用 Permissions API) 授予相应权限和
"clipboard-read"
或"clipboard-write"
权限,调用Clipboard
对象的方法不会成功。
Clipboard 对象提供了四个方法,用来读写剪贴板。它们都是异步方法,返回 Promise 对象。
read()
从剪贴板读取数据(比如图片),返回一个 Promise对象。readText()
从操作系统读取文本,返回一个 Promise对象。write()
写入任意数据至操作系统剪贴板。writeText()
写入文本至操作系统剪贴板。目前,各个浏览器厂商正在逐步开始支持 Clipboard 对象及其方法,兼容性如下:
对上面所说的做一个总结:
~
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!