react实现点击复制

最新推荐文章于 2025-06-11 16:55:29 发布

原创最新推荐文章于 2025-06-11 16:55:29 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

本文介绍了两种实现网页内容复制的方法：一是利用浏览器提供的document.execCommand('copy')，通过创建隐藏input元素并选中内容来实现复制；二是使用copy-to-clipboard库，简化复制操作。document.execCommand()可以执行多种文本操作，但在某些场景下可能与用户交互冲突。copy-to-clipboard库则提供了一种更简洁的复制解决方案。文章探讨了这两个方法的适用场景和使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用浏览器提供的document.execCommand('copy')

2、使用copy-to-clipboard库

document.execCommand("copy")

1、document.execCommand封装

function copy(e) {
    let transfer = document.createElement('input');
    document.body.appendChild(transfer);
    transfer.value = target.value;  // 这里表示想要复制的内容
    transfer.focus();
    transfer.select();
    if (document.execCommand('copy')) { //判断是否支持document.execCommand('copy')       document.execCommand('copy');
    }
    transfer.blur();
    console.log('复制成功');
    document.body.removeChild(transfer);
    
}

$('#copyBtn').addEventListener('click', copy);

其实就是新创建了一个inputDOM元素，然后选中该元素，把要复制的内容赋给input.value，这个时候执行document.execCommand('copy')，会把当前页面所有选中的内容复制到剪贴板，也就实现了复制的操作，最后再把新建的DOM元素移除，在不影响DOM树的情况下达到复制的目的。

拓展

document.execCommand() 方法其实用法还有很多，它可以使当前选中的可编辑内容实现一些常用的操作，如copy、cut、paste、delete、contentReadOnly等等，具体请看document.execCommand，但使用这个API需要谨慎，因为这相当于篡改网页原生的交互，可能会和用户的交互操作产生冲突，发生意想不到的结果。但是在某些特定的场景，使用这个API能达到不错的效果，比如富文本编辑器里就是个神器，值得慢慢去研究。

2、使用copy-to-clipboard库

npm下载