ccombox获取选择的文本_「VUE小技巧」使用clipboard.js实现一键复制文本功能

需求

最近在做商城项目,有个需求是需要点击复制订单号的,然后就觉得可以使用原生的复制方法和使用第三方库。

a60c3e22b6f73fa68ba39de9dd6b9423.png

浏览器原生方法

这种方式兼容性不是太好,还要看浏览器是否支持,容易采坑。

//在IE中可以用window.clipboardData.setData('text','内容')实现。//在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来实现这种操作。//具体做法://1.创建一个隐藏的input框//2.点击的时候,将要复制的内容放进input框中//3.选择文本内容input.select()//4.这里只能用input或者textarea才能选择文本。//5.执行浏览器的复制命令document.execCommand("copy")。 function copyText() { var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来 var input = document.getElementById("input"); // 获取隐藏input的dom input.value = text; // 修改文本框的内容 input.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 alert("复制成功"); }//在事件中可以通过e 对内容进行修饰document.body.oncopy = e => { // 监听全局复制 做点什么} // 还有这种写法:document.addEventListener("copy
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值