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

复制代码
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('测试复制功能');

是不简单多了一下子.

相关推荐
鹏北海10 分钟前
JSBridge 原理详解
前端
孟健14 分钟前
我的网站被黑了:一天灌入 227 万条垃圾数据,AI 写的代码差点让我社死
前端
anOnion25 分钟前
构建无障碍组件之Checkbox pattern
前端·html·交互设计
IT枫斗者2 小时前
IntelliJ IDEA 2025.3史诗级更新:统一发行版+Spring Boot 4支持,这更新太香了!
java·开发语言·前端·javascript·spring boot·后端·intellij-idea
N***p3652 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
NGC_66113 小时前
二分查找算法
java·javascript·算法
享誉霸王3 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
a1117764 小时前
飞机躲避炸弹 网页游戏
前端·开源·html·threejs
夏乌_Wx4 小时前
mybash:简易 Shell 实现的设计思路与核心模块解析
linux·服务器·前端
滕青山5 小时前
URL编码/解码 核心JS实现
前端·javascript·vue.js