告别复制粘贴的黑暗时代!教你们一个新崛起的API

本文介绍了前端开发中如何利用新的API替代传统的复制粘贴实现方式,通过`navigator.clipboard.writeText`和`navigator.clipboard.readText`简化复制粘贴功能的代码,并讨论了兼容性和权限问题,以及如何结合旧方法以应对不同环境的需求。
摘要由CSDN通过智能技术生成

在前端开发的世界里,复制粘贴功能就像是那个总是被忽视,却在关键时刻能救你一命的老朋友。我们习惯了用那些古老的魔法咒语(document.execCommand('copy'))来实现这一功能,但时代在进步,技术在更新,是时候告别那些让人头疼的兼容性问题,迎接新时代的剪贴板API了。

旧时代的遗物

在那个遥远的时代,我们为了实现复制粘贴功能:

  • 😈不得不创建一个神秘的textarea元素,

  • 👿然后让它隐形(通过CSS隐藏)

  • 👹给它赋予力量(设置值)

  • 🎃将它召唤到页面的某个角落,然后通过古老的仪式(调用select方法和execCommand

  • 👻最后在一切完成之后,让它消失在历史的长河中(移除元素)。

代码如下:

 // 创建一个临时的 textarea 元素
  const textarea = document.createElement('textarea');
  // 设置 textarea 的内容
  textarea.value = inputElement.value;
  // 防止在页面上显示 textarea
  textarea.setAttribute('readonly', '');
  textarea.style.position = 'absolute';
  textare
  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

瑆箫

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

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

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

打赏作者

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

抵扣说明:

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

余额充值