JS怎么使用剪贴板操作剪贴板API - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下JS怎么使用剪贴板操作剪贴板API,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

一、Document.execCommand()方法

Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持。

它支持复制,剪切和粘贴这三个操作。

<李>

Document.execCommand(& # 39;复制# 39;)(复制)

<李>

Document.execCommand(& # 39;削减# 39;)(剪切)

<李>

Document.execCommand(& # 39;粘贴# 39;)(粘贴)

(1)复制操作

复制时,先选中文本,然后调用Document.execCommand(& # 39;复制# 39;),选中的文本就会进入剪贴板。

const inputElement =, document.querySelector(& # 39; #输入# 39;); 　　inputElement.select (); 　　document.execCommand(& # 39;复制# 39;);

上面示例中,脚本先选中输入框inputElement里面的文字(inputElement.select()),然后document.execCommand(& # 39;复制# 39;)将其复制到剪贴板。

注意,复制操作最好放在事件监听函数里面,由用户触发(比如用户点击按钮)。如果脚本自主执行,某些浏览器可能会报错。

(2)粘贴操作

粘贴时,调用document.execCommand(& # 39;粘贴# 39;),就会将剪贴板里面的内容,输出到当前的焦点元素中。

const pasteText =, document.querySelector(& # 39; #输出# 39;); 　　pasteText.focus (); 　　document.execCommand(& # 39;粘贴# 39;);

(3)缺点

document.execCommand()方法虽然方便,但是有一些缺点。

首先,它只能将选中的内容复制到剪贴板,无法向剪贴板任意写入内容。

其次,它是同步操作,如果复制/粘贴大量数据,页面会出现卡顿。有些浏览器还会跳出提示框,要求用户许可,这时在用户做出选择前,页面会失去响应。

为了解决这些问题,浏览器厂商提出了异步的剪贴板API。

二、异步剪贴板API

剪贴板API是下一代的剪贴板操作方法,比传统的document.execCommand()方法更强大,更合理。

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

导航器。剪贴板属性返回剪贴板对象,所有操作都通过这个对象进行。

const clipboardObj =, navigator.clipboard;

如果导航器。剪贴板属性返回没有定义,就说明当前浏览器不支持这个API。

由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个API的安全限制比较多。

首先,Chrome浏览器规定,只有HTTPS协议的页面才能使用这个API。不过,开发环境(localhost)允许使用非加密协议。

其次,调用时需要明确获得用户的许可。权限的具体实现使用了权限API,跟剪贴板相关的有两个权限:clipboard-write(写权限)和clipboard-read(读权限)干净自己写权限“自动授予脚本,而“读权限“必须用户明确同意给予。也就是说,写入剪贴板,脚本可以自动完成,但是读取剪贴板时,浏览器会弹出一个对话框,询问用户是否同意读取。

JS怎么使用剪贴板操作剪贴板API”> </p> <p>另外,需要注意的是,脚本读取的总是当前页面的剪贴板。这带来的一个问题是,如果把相关的代码粘贴到开发者工具中直接运行,可能会报错,因为这时的当前页面是开发者工具的窗口,而不是网页页面。</p> <pre类= (async (),=祝辞,{ 　　const 才能;text =, await navigator.clipboard.readText (); 　　console.log才能(文本); 　　})();