现在有很多第三方插件能够实现 copy 功能,但如果让我们自己去做,我们知道如何去实现吗?
这篇文章介绍三种实现方案。
使用 Async Clipboard API
这种方式使用起来最简单,但兼容性不太好,而且要求比较多。
示例代码:
const promise = na***ator.clipboard.writeText(newClipText);
需要注意,方法的返回值是个 Promise。并且使用此方法时,页面必须处于 focus 状态,否则会报错。
使用 Do***ent.execCommand
此方法虽然警告被废弃,不再属于 web 标准,但历史因素较多,相信浏览器还会支持很久。
123456
复制 DOM 元素的时候,需要额外使用到 selection API 和 Range API。
de***oper.mozilla.org/en-US/docs/…
de***oper.mozilla.org/en-US/docs/…
示例代码:
const copyButton = do***ent.getElementById('copyButton'); const content = do***ent.getElementById('content'); co***utton.addEventListener('click', function () { const selection = wi***w.getSelection(); const range = do***ent.createRange(); // 设置选中内容 ra***.selectNodeContents(content); // 清空选中内容 se***tion.removeAllRanges(); // 添加选中内容 se***tion.addRange(range); do***ent.execCommand('copy'); });
selection 需要先清空再添加 range。
这里会有一个细节问题,点击复制按钮之后,被复制的内容处于选中状态,有些突兀。
解决方式是在复制完成之后调用 se***tion.removeAllRanges()
清空选中内容即可。
再考虑一种情况,用户在复制之前就选中了页面的部分内容。在复制完成之后,除了清空选中的复制内容,还需要还原用户在复制之前就选中的内容。
实现代码如下:
const copyButton = do***ent.getElementById('copyButton'); const content = do***ent.getElementById('content'); co***utton.addEventListener('click', function () { const selection = wi***w.getSelection(); const range = do***ent.createRange(); // 缓存用户选中的内容 const currentRange = se***tion.rangeCount === 0 ? null : se***tion.getRangeAt(0); // 设置文档片段 ra***.selectNodeContents(content); // 清空选中内容 se***tion.removeAllRanges(); // 将文档片段设置为选中内容 se***tion.addRange(range); try { // 复制到剪贴板 do***ent.execCommand('copy'); } catch (err) { // 提示复制失败 } finally { se***tion.removeAllRanges(); if (currentRange) { // 还原用户选中内容 se***tion.addRange(currentRange); } } });
先缓存用户选中的内容,复制完成之后,再还原。
使用 input 元素对象的 select
方法即可选中内容,无需创建 range 片段设置选中内容。
示例代码:
const copyButton = do***ent.getElementById('copyButton'); const inputEl = do***ent.getElementById('input'); co***utton.addEventListener('click', function () { const selection = wi***w.getSelection(); const currentRange = se***tion.rangeCount === 0 ? null : se***tion.getRangeAt(0); // 选中 input 内容 in***El.select(); // 复制到剪贴板 try { do***ent.execCommand('copy'); } catch (err) { // 提示复制失败 // 。。。 } finally { se***tion.removeAllRanges(); if (currentRange) { // 还原用户选中内容 se***tion.addRange(currentRange); } } });
点击复制按钮,同样不会移除之前选中的内容。
w3***ithub.io/clipboard-a…
引用上面链接内的一段代码作为示例:
// Overwrite what is being copied to the clipboard. do***ent.addEventListener('copy', function (e) { // e.***pboardData is initially empty, but we can set it to the // data that we want copied onto the clipboard. e.***pboardData.setData('text/plain', '西炒蛋'); // This is necessary to prevent the current document selection from // being written to the clipboard. e.***ventDefault(); });
在页面复制任何内容,粘贴输出的内容都会是 “西炒蛋”。
上一篇: 一文浅析JS包管理工具:yarn