将文字复制到剪切板

笔者在开发过程中遇到点击按钮之后将文字复制到剪切板的需求,先将按钮的回调函数封装起来,便于以后使用,需要的朋友可以自取~

js 复制代码
  const _copyToClipboard = staticPart => dynamicPart => {
    if (!dynamicPart) return;
    const textToCopy = `${staticPart}${dynamicPart}`;
    const tempInput = document.createElement('input');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
  };

这个函数将复制到剪切板中的内容分成两个部分:静态的和动态的,因此在使用的时候可以这样做:

js 复制代码
const copyFunc = _copyToClipboard('http://localhost:3000/api?id=');
copyFunc('678');
copyFunc('123');
相关推荐
Csvn6 小时前
页面「穿越」之谜:React 中因 key 值不正确导致的渲染 Bug 排查实战
前端
浅水壁虎6 小时前
前端技术_TypeScript(第一章)
前端
你怎么知道我是队长6 小时前
JavaScript 函数 this 全解
开发语言·javascript·ecmascript
laboratory agent开发7 小时前
企业AI Agent落地前,先回答四个工程问题
java·前端·人工智能
微三云 - 廖会灵 (私域系统开发)7 小时前
电商系统国际化架构设计:多语言、多币种、多时区、多税制的全链路实现
java·前端·数据库
不简说8 小时前
JS 代码技巧 vol.5 — 10 个错误处理套路,从 try/catch 到 Error Boundary
前端·javascript·程序员
wordpress资料库8 小时前
Next.js更适合移动开发 不适合web开发
开发语言·前端·javascript·next.js
卷无止境8 小时前
Quarkdown:赋予 Markdown 超能力的现代排版系统
前端·markdown
BerryS3N9 小时前
C++23新特性在CLion中的实战体验:从语法糖到生产力提升
前端·c++23
申君健24864182772029 小时前
# WebGPU 的渲染原理与 Shader
前端