将文字复制到剪切板

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

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');
相关推荐
前端 贾公子10 分钟前
Git优雅使用:git tag操作
javascript·github
We་ct1 小时前
LeetCode 125. 验证回文串:双指针解法全解析与优化
前端·算法·leetcode·typescript
帅得不敢出门1 小时前
Android Framework在mk中新增类似PRODUCT_MODEL的变量并传递给buildinfo.sh及prop属性中
android·linux·前端
她超甜i2 小时前
css省略号展示,兼容性强,js判断几行,不需要定位
javascript·css·vue.js
小码吃趴菜2 小时前
【无标题】
前端·chrome
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于HTML5的购物网站的设计与实现为例,包含答辩的问题和答案
前端·html·html5
梦6503 小时前
CSS 元素垂直水平居中的 8 种方法
前端·css
We་ct3 小时前
LeetCode 68. 文本左右对齐:贪心算法的两种实现与深度解析
前端·算法·leetcode·typescript
ShoreKiten3 小时前
ctfshow-web316
运维·服务器·前端
前端 贾公子3 小时前
release-it 使用指南
前端·javascript