复制文字功能写入剪切板的坑

主要解决过程是通义千问+测试。这篇文章写的也不错,本文补充几种情况 juejin.cn/post/718686...

核心提示

  • navigator.clipboard.writeText 安卓不支持 且需要 https,不建议用该方法
  • 苹果设备,点击事件触发时必须立即往剪切板里写入内容,若点击后要ajax请求后再往剪切板里写会失败!!!

建议处理流程

  1. 若写入剪切板前要调用接口。设置一个变量 unsupportCopy: myPlatform.includes('mac') || myPlatform.includes('ios') 判断不支持直接写入剪切板的设备
  2. 点击复制按钮时,若设备支持点击事件和写入剪切板直接有时差,就调用下面的方法写入剪切板。若不支持,就弹出弹框,里面展示内容,然后提供一个按钮,点击复制

实现方案

js 复制代码
    copyStrToClipboard(str, successCb) {
      navigator.clipboard
        .writeText(str)
        .then(() => {
          this.$message.success('复制成功!')
          successCb && successCb()
        })
        .catch((err) => {
          this.$message.error(err)
        })
    }

document.execCommand('copy')

js 复制代码
export function copyToClipboard(text, successCB) {
  const textarea = document.createElement('textarea');
  textarea.value = text; // 直接赋值包含换行符的文本
  textarea.style.position = 'fixed'; // 避免滚动问题
  document.body.appendChild(textarea);
  textarea.select();
  try {
    const successful = document.execCommand('copy');
    if (successful) {
      Message.success('复制成功!')
      successCB && successCB()
    } else {
      Message.error('本设备不支持复制!')
    }
  } catch (err) {
    Message.error('复制失败' + err)
  }
  document.body.removeChild(textarea); // 清理
}

注意,此处复制内容的容器是textarea 而不是 document.createElement('input'),若用的是input,若文本里含 \n 是复制不出来换行的

相关推荐
Liu.7742 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_3 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
言兴3 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra4 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋5 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴5 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农6 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan7 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown7 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh7 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js