在前端开发的世界里,复制粘贴功能就像是那个总是被忽视,却在关键时刻能救你一命的老朋友。我们习惯了用那些古老的魔法咒语(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