前端复制功能

前端复制功能

在很多场景我们见到很多一键复制的操作(如下图),最近一个react项目中需要实现一个点击复制的功能,拿出来和道友分享一下。
这里写图片描述
实现代码

 function copyText(value) {
  document.designMode = 'on';
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.setAttribute('value', value);
  input.setAttribute('readonly', 'readonly')
  input.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    // console.log('Copy email command was ' + msg);
    if(!successful) {
        throw new Error("copy failed");
    }
    Message.success({
      content: "复制成功!"
    });
  } catch (err) {
    console.log('Oops, unable to copy');
    Message.error({
      content: "复制失败,请重试或手动复制"
    })
  }
  document.body.removeChild(input);
  document.designMode = 'off'
}

实现函数如上所示,designMode说明见参考链接

参考链接

  1. 原生JavaScript实现复制/粘贴
  2. clipboard.js
  3. MDN exceCommand 介绍
  4. designMode介绍
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值