将文字复制到剪切板

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

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');
相关推荐
cypking2 分钟前
前端瓦片渲染解决方案(解决大量数据渲染卡顿问题)
前端
李子焱2 分钟前
第三节:开发环境搭建与Trae IDE深度配置
前端·ide·python·node.js·trae ide
王家视频教程图书馆21 分钟前
electron 环境搭建
前端·javascript·electron
速易达网络21 分钟前
Vue 3 的无人机送餐飞控数字大屏
前端
ZC跨境爬虫27 分钟前
Playwright核心操作实战精讲(QQ空间+百度+iframe,含等待_键盘_iframe操作)
前端·爬虫·python·计算机外设
GISer_Jing31 分钟前
GeoFlow-AI:智能三维地理空间处理平台
前端·人工智能·架构
WordPress学习笔记32 分钟前
建外贸独立站公司
前端·wordpress
OtIo TALL35 分钟前
Redis 6.2.7安装配置
前端·数据库·redis
ZC跨境爬虫35 分钟前
对称加密算法详解(DES篇):特点、实现与逆向实操
前端·javascript·爬虫
Hello--_--World41 分钟前
VUE3:基础篇官网笔记
前端·vue.js·笔记