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

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('复制失败')
    }
  }
  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值