JS点击按钮复制文本

在PC端上通过点击按钮复制对应文本的业务场景,不经常有,但是让我碰见了,也了解了下实现方法。

1、通过createElement生成一个input输入框,并将其透明度设为0,使得用户无感知;

2、将需要复制的内容赋值到输入框内,(一定要将输入框添加到页面body中)才能使用select函数选中。

3、通过document.execCommand(“copy”)执行浏览器复制命令,就能将对应文本进行复制了

function handleCopy(text) {
  const input = document.createElement('input')
  input.style.cssText = 'opacity: 0;';
  input.type = 'text';
  input.value = text; // 修改文本框的内容
  document.body.appendChild(input)
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  this.$message({message: '复制成功',type: 'success'})
},
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白菜new

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值