用js完成点击按钮实现复制的功能

最新推荐文章于 2024-03-05 12:17:03 发布

原创

最新推荐文章于 2024-03-05 12:17:03 发布 · 5.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript

本文介绍如何利用JavaScript和浏览器API实现点击按钮复制非表单元素内容的功能。通过创建Range对象，设置选择区域，使用Selection对象进行操作，并通过document.execCommand复制到剪贴板。在实现过程中需要注意清除原有选区，避免浏览器警告或错误。代码适用于非表单元素，对于表单元素，可以直接使用el.select()方法。

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

先贴代码，Button是antd-design中的button，要做到的是点击button复制span中的内容。

toClipboard = () => {
    const copySpan = document.getElementById('copy');
    const range = document.createRange();

    range.selectNodeContents(copySpan);
    const selection = window.getSelection();
    selection.removeAllRanges();//（注意）
    selection.addRange(range);

    const copyContent = document.execCommand('Copy',false,null);
    selection.removeRange(range);

    if (copyContent) {

      console.log('复制成功', copyContent);

    }
  }

<Button key="copyButton" onClick={this.toClipboard} >
        复制
</Button>
<span id="copy">{JSON.stringify(data)}</span>

这里用到的是浏览器的一个api来实现复制功能：　document.execCommand('Copy',false,null)；

实现步骤：

首先是利用document.createRange()创建一个 Range 对象 ,然后获取所需复制元素的子元素的长度大小，我这里使用的是selectNodeContents()方法，来选择区域的大小，还可以调用Range的其他方法，如：setStart,set

最低0.47元/天解锁文章

200万优质内容无限畅学