将文字复制到剪切板

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

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');
相关推荐
qingyun9893 分钟前
深度优先遍历:JavaScript递归查找树形数据结构中的节点标签
前端·javascript·数据结构
胡楚昊3 分钟前
NSSCTF动调题包通关
开发语言·javascript·算法
熬夜敲代码的小N21 分钟前
Vue (Official)重磅更新!Vue Language Tools 3.2功能一览!
前端·javascript·vue.js
90后的晨仔25 分钟前
用 Python 脚本一键重命名序列帧图片的名称
前端
辰同学ovo25 分钟前
Vue 2 路由指南:从入门到实战优化
前端·vue.js
小彭努力中26 分钟前
1.在 Vue 3 中使用 Cesium 快速展示三维地球
前端·javascript·vue.js·#地图开发·#cesium·#vue3
一棵开花的树,枝芽无限靠近你30 分钟前
【face-api.js】1️⃣基于Tensorflow.js的人脸识别项目开源项目
javascript·开源·tensorflow·face-api.js
一字白首35 分钟前
Vue3 进阶,新特性 defineOptions/defineModel+Pinia 状态管理全解析
前端·javascript·vue.js
90后的晨仔40 分钟前
🛠️ 为什么配置 ~/.ssh/config 后,Sourcetree 就能正常推送了?
前端
Sylus_sui1 小时前
Vue2 与 Vue3 数据双向绑定:区别与原理详解
前端·javascript·vue.js