将文字复制到剪切板

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

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');
相关推荐
晚风资源组19 小时前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu20 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
摘星编程20 小时前
React Native for OpenHarmony 实战:Swiper 滑动组件详解
javascript·react native·react.js
鸣弦artha20 小时前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
光影少年1 天前
前端如何调用gpu渲染,提升gpu渲染
前端·aigc·web·ai编程
Surplusx1 天前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
小宇的天下1 天前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
LongJ_Sir1 天前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java1 天前
JavaScript 中定义全局变量的教程
javascript
一只小bit1 天前
Qt 文件:QFile 文件读写与管理教程
前端·c++·qt·gui