js-将已有的文字复制到剪切板

最新推荐文章于 2025-05-10 12:04:37 发布

救护用的垃圾车

最新推荐文章于 2025-05-10 12:04:37 发布

阅读量3.2k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/DeepHugY/article/details/94462238

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在React项目中使用原生JavaScript实现复制功能的方法，避免了使用插件带来的额外负担。通过创建和操作DOM元素，实现了将指定数据复制到剪贴板的功能，并提供了详细的代码示例。

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

react 项目中涉及到复制功能，逻辑就是用户点击一个复制按钮，将后台拿到的数据放进粘贴板供用户粘贴，感觉用插件还要引入和绑定DOM比较麻烦，就干脆用原生写了，以下为实现方法，注释已经写的比较明白了，可以直接拿来用：

  handleCopyDDL = record =>{
    // 获取需要复制的文字
    const copyStr = record.ddl_str
    // 创建input标签存放需要复制的文字
    const oInput = document.createElement('input');
    // 把文字放进input中，供复制
    oInput.value = copyStr;
    document.body.appendChild(oInput);
    // 选中创建的input
    oInput.select();
    // 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
    const copyResult = document.execCommand('copy')
    // 操作中完成后 从Dom中删除创建的input
    document.body.removeChild(oInput)
    // 根据返回的复制结果 给用户不同的提示
    if (copyResult) {
      message.success('DDL已复制到粘贴板')
    } else {
      message.error('复制失败')
    }
  }