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

主要解决过程是通义千问+测试。这篇文章写的也不错,本文补充几种情况 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 是复制不出来换行的

相关推荐
user29752587612几秒前
别再用关键字搜了!手搓一个Vite插件,为页面上的标签打上标记
前端·javascript·vite
野区小女王6 分钟前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
尝尝你的优乐美23 分钟前
原来前端二进制数组有这么多门道
前端·javascript·面试
CF14年老兵41 分钟前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
张元清1 小时前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试
Struggler2811 小时前
让ai更加精准的理解你的提示词
前端
橙某人1 小时前
📆基于Grid布局完成最精简的日期组件
前端·javascript
李剑一1 小时前
面试官:你是如何理解MVVM模型的?请你结合自己做过的项目从框架层面解释一下
前端·面试
tiantian_cool1 小时前
Flutter-1
前端