将文字复制到剪切板

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

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');
相关推荐
筱歌儿2 分钟前
TinyMCE-----word表格本地图片转base64并上传
前端·word
研☆香2 分钟前
html css js文件开发规范
javascript·css·html
0思必得03 分钟前
[Web自动化] Selenium简单使用
前端·python·selenium·自动化·web自动化
2301_818732065 分钟前
下载nvm后,通过nvm无法下载node,有文件夹但是为空 全局cmd,查不到node和npm 已解决
前端·npm·node.js
赵民勇6 分钟前
JavaScript中的this详解(ES5/ES6)
前端·javascript·es6
hhcccchh7 分钟前
学习vue第九天 计算属性与侦听器
前端·vue.js·学习
wayne2148 分钟前
React Native 状态管理方案全梳理:Redux、Zustand、React Query 如何选
javascript·react native·react.js
我的golang之路果然有问题9 分钟前
Mac 上的 Vue 安装和配置记录
前端·javascript·vue.js·笔记·macos
代码游侠13 分钟前
应用——Linux FrameBuffer图形显示与多线程消息系统项目
linux·运维·服务器·开发语言·前端·算法
小二·21 分钟前
Python Web 开发进阶实战:Flask 项目中的表单验证、错误处理与用户体验优化
前端·python·flask