Js实现剪切板操作（点击复制）

Document.execCommand()

tips:一个随时可能被删除的老方法，不建议使用，甚至部分编译器会出现报错

document.execCommand()方法处理Html数据时常用语法格式如下:

document.execCommand(sCommand[,交互方式, 动态参数])

document.execCommand('copy')（复制）
document.execCommand('cut')（剪切）
document.execCommand('paste')（粘贴）

虽然这个功能已经过时，但是该方法兼容性要更好，各种浏览器都支持。

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

它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。

有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。

想要详细了解它的使用场景可以点击document.execCommand()的用法

Clipboard API

首先，要明确的是这是一个受限制较多的异步API，它比document.execCommand()方法更强大、更合理，它所有的操作都是异步的，返回Promise对象，不会造成页面卡顿。

并且，它可以将任意内容（比如图片）放入剪贴板。

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

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

tips:划重点！！只有HTTPS才能用

它一共提供了四个方法：

• Clipboard.readText() 粘贴文本

• Clipboard.read() 粘贴数据

• Clipboard.writeText() 复制文本

• Clipboard.write() 复制数据

这里以Clipboard.writeText()为例

copy(){
navigator.clipboard.writeText('想要复制的文本').then(() => {
alert(' 复制成功')
}).catch(err=>{
console.log(err,'err')
})
}

最后

以上就是高兴荷花为你收集整理的Js实现剪切板操作（点击复制）的全部内容，希望文章能够帮你解决Js实现剪切板操作（点击复制）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。