前端实现将内容复制到剪切板的实现方法(个人项目使用)

复制代码
export const writeStringToClipboard =(text:string)=>{
    const el=document.createElement('textarea');
    el.value=text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

其中, document.execCommand已经被废弃了,不建议使用了,所以推荐使用下面的新方法 :

复制代码
async function copyTextToClipboard(text) {  
    try {  
      await navigator.clipboard.writeText(text);  
      console.log('Text copied to clipboard');  
    } catch (err) {  
      console.error('Failed to copy text: ', err);  
    }  
  }  
    
  // 使用方法  
  copyTextToClipboard('测试复制功能');

是不简单多了一下子.

相关推荐
结网的兔子4 分钟前
前端学习笔记——Element Plus 栅格布局系统示例
前端·javascript·css
l1t23 分钟前
DeepSeek总结的用 C# 构建 DuckDB 插件说明
前端·数据库·c#·插件·duckdb
zhensherlock23 分钟前
Protocol Launcher 系列:App Store 精准引流与应用推广
javascript·macos·ios·typescript·iphone·mac·ipad
泯泷26 分钟前
从零构建寄存器式 JSVMP:实战教程导读
前端·javascript·算法
叫我一声阿雷吧41 分钟前
JS 入门通关手册(24):Promise:从回调地狱到异步优雅写法
javascript·前端开发·promise·前端面试·异步编程·js进阶·js异步
开源盛世!!1 小时前
3.19-3.21
linux·服务器·前端
必胜刻1 小时前
AJAX 请求理解
前端·ajax·okhttp·前后端交互
小民AI实战笔记1 小时前
NVM实战指南:高效管理你的Node.js环境
前端·node.js
www_stdio1 小时前
前端异步核心:Promise 从入门到吃透
前端
朱建伟1 小时前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite