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

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

是不简单多了一下子.

相关推荐
OpenTiny社区15 小时前
重磅预告|OpenTiny 亮相 QCon 北京,共话生成式 UI 最新技术思考
前端·开源·ai编程
前端老实人灬15 小时前
web前端面试题
前端
Moment15 小时前
AI 全栈指南:NestJs 中的 Service Provider 和 Module
前端·后端·面试
IT_陈寒15 小时前
为什么我的JavaScript异步回调总是乱序执行?
前端·人工智能·后端
Moment15 小时前
AI全栈入门指南:NestJs 中的 DTO 和数据校验
前端·后端·面试
小码哥_常15 小时前
告别RecyclerView卡顿!8个优化技巧让列表丝滑如德芙
前端
小村儿15 小时前
Harness Engineering:为什么你用 AI 越用越累?
前端·后端·ai编程
FrontAI15 小时前
Next.js从入门到实战保姆级教程:环境配置与项目初始化
react.js·typescript·学习方法
enoughisenough16 小时前
浏览器判断控制台是否开启
前端
Moment16 小时前
当前端开始做 Agent 后,我才知道 LangGraph 有多重要❗❗❗
前端·后端·面试