将文字复制到剪切板

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

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');
相关推荐
刘一说5 分钟前
ES6+核心特性全面浅析
java·前端·es6
i_am_a_div_日积月累_8 分钟前
el-tree半选回显问题;el-tree获取半选节点id
javascript·vue.js·elementui
kirinlau11 分钟前
Vue.observable实现vue原生轻量级状态管理详解
前端·javascript·vue.js
严文文-Chris12 分钟前
RAG关键技术要点详解
java·服务器·前端
自然 醒13 分钟前
elementUI的select下拉框如何下拉加载数据?
前端·javascript·elementui
我没想到原来他们都是一堆坏人14 分钟前
常用npm源与nrm
前端·npm·node.js
编代码的小王17 分钟前
【无标题】
前端·css
im_AMBER26 分钟前
React 20 useState管理组件状态 | 解构 | 将事件处理函数作为 props 传递 | 状态提升
前端·javascript·笔记·学习·react.js·前端框架
小oo呆27 分钟前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Tools
前端·javascript·easyui