将文字复制到剪切板

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

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');
相关推荐
小华同学ai1 分钟前
vue-office:Star 4.2k,款支持多种Office文件预览的Vue组件库,一站式Office文件预览方案,真心不错
前端·javascript·vue.js·开源·github·office
APP 肖提莫3 分钟前
MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)
java·前端·算法
问道飞鱼14 分钟前
【前端知识】强大的js动画组件anime.js
开发语言·前端·javascript·anime.js
k093315 分钟前
vue中proxy代理配置(测试一)
前端·javascript·vue.js
傻小胖17 分钟前
React 脚手架使用指南
前端·react.js·前端框架
程序员海军29 分钟前
2024 Nuxt3 年度生态总结
前端·nuxt.js
m0_7482567840 分钟前
SpringBoot 依赖之Spring Web
前端·spring boot·spring
web135085886351 小时前
前端node.js
前端·node.js·vim
m0_512744641 小时前
极客大挑战2024-web-wp(详细)
android·前端
若川1 小时前
Taro 源码揭秘:10. Taro 到底是怎样转换成小程序文件的?
前端·javascript·react.js