前端小白别慌！H5一键复制到剪贴板翻车现场与保姆级救场指南

前端小白别慌！H5一键复制到剪贴板翻车现场与保姆级救场指南

嘿，群里的兄弟姐妹们，今天咱们不聊那些虚头巴脑的架构，就聊聊那个让人头秃的"H5复制到剪贴板"。你是不是也遇到过那种情况：代码写得飞起，一真机测试直接原地爆炸？别急，今儿个咱就把这坑填了。

开场先吐个槽

咱们先说说为啥这玩意儿这么难搞。想当年还在用jQuery时代，一个execCommand走天下，现在好了，移动端浏览器一个个跟防贼似的，权限卡得死死的。你明明点了按钮，它就是不给你复制，或者弹个莫名其妙的提示，用户以为你病毒呢。

最离谱的是啥？是你本地开发的时候一切正常，Chrome DevTools里点得飞起，一丢到测试环境或者真机上，直接哑火。那种落差感，就像你追了三个月的女神终于答应约会，结果见面发现人家带着男朋友来——就问你崩不崩溃。

而且你发现没有，现在的用户越来越刁了。复制个东西要是超过两秒没反馈，立马就开始疯狂点击，点得你服务器都慌。所以咱们今天这篇就是给那些被"复制失败"搞到怀疑人生的前端er准备的救命稻草，保证你看完能少熬几个夜。

这技术到底是个啥鬼

简单说，就是把网页上的一段文字或者图片，塞进用户的系统剪贴板里。听起来简单得像喝口水，实际上水深得能淹死人。

老祖宗：document.execCommand

这货是上古时期的产物，IE时代就在了。原理简单粗暴：创建一个隐藏的textarea，把内容塞进去，选中，然后执行document.execCommand('copy')，完事儿。

// 最原始的复制方案，兼容性无敌但毛病一堆
function copyWithExecCommand(text) {
  // 先搞个临时的textarea当容器
  const textarea = document.createElement('textarea');
  textarea.value = text;
  
  // 藏起来，别让用户看见这丑东西
  textarea.style.position = 'fixed';
  textarea.style.left = '-9999px';
  textarea.style.top = '0';
  textarea.style.opacity = '0';
  
  document.body.appendChild(textarea);
  
  // 重点来了：必须选中内容
  textarea.focus();
  textarea.select();
  
  try {
    // 执行复制命令，返回boolean表示成功失败
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log('复制' + msg);
    return successful;
  } catch (err) {
    console.error('复制出错:', err);
    return false;
  } finally {
    // 用完就扔，别占内存
    document.body.removeChild(textarea);
  }
}

// 使用示例
document.getElementById('copyBtn').addEventListener('click', () => {
  const result = copyWithExecCommand('这是要复制的内容');
  if (result) {
    alert('复制成功！'); // 别用alert，后面会说更好的方案
  } else {
    alert('复制失败，请手动复制');
  }
});

但是！这玩意儿有几个致命的坑：

第一，必须在同步事件里触发。啥意思？就是你不能搞个setTimeout，延迟个几百毫秒再执行，那时候浏览器就认为不是用户主动操作了，直接给你拒了。这就导致如果你要先发个请求获取复制内容，再复制，就GG了。

第二，选区问题。有时候你明明选中了，但浏览器觉得你没选中，或者选中的不是你想要的内容。特别是页面上本来就有选中文字的时候，会直接把你之前的选区给搞乱。

第三，iOS的坑。iOS Safari对这货支持得特别诡异，有时候能行有时候不行，全看它心情。而且iOS上你必须保证textarea在视口内，虽然看不见，但不能真的丢到-9999px那么远，否则它不认。

新贵：Clipboard API

这是现代浏览器推的标准，基于Promise，支持异步，能写文本能写图片，甚至还能读剪贴板（当然要权限）。

// 现代浏览器的优雅写法
async function copyWithClipboardAPI(text) {
  try {
    // 直接调用navigator.clipboard.writeText，返回Promise
    await navigator.clipboard.writeText(text);
    console.log('复制成功，这也太简单了吧');
    return true;
  } catch (err) {
    console.error('复制失败:', err.name, err.message);
    
    // 根据错误类型给用户不同的提示
    if (err.name === 'NotAllowedError') {
      console.log('权限被拒绝，可能是没点按钮直接调用了');
    } else if (err.name === 'SecurityError') {
      console.log('不在安全上下文（HTTPS）里');
    }
    
    return false;
  }
}

// 使用示例，注意必须是用户点击触发
document.getElementById('copyBtn').addEventListener('click', async () => {
  const success = await copyWithClipboardAPI('现代API复制的内容');
  if (success) {
    showToast('已复制到剪贴板');
  } else {
    showToast('复制失败，请重试');
  }
});

看着是不是清爽多了？但别高兴太早，这货的坑也不少：

第一，HTTPS only。你在http环境下直接报错，连商量的余地都没有。本地开发用localhost没事，但一到测试环境就炸。

第二，权限问题。虽然写剪贴板一般不需要显式申请权限，但读剪贴板需要，而且有些浏览器（说的就是你，Safari）对"安全上下文"的定义特别严格。

第三，兼容性。IE全军覆没，旧版安卓浏览器也悬。你可以去caniuse查，但现实是用户的手机永远比你想象的更旧。

新老技术大乱斗

execCommand 的底裤被扒光了

先说那个快入土为安的execCommand。这老家伙虽然兼容性无敌，连IE6都能跑，但它有个致命伤：必须在同步事件里触发。

啥场景会踩坑？比如你点击"复制链接"按钮，但这个链接需要先去服务器请求个短链，拿到后再复制。这时候你用execCommand就傻眼了：

// 错误的示范：异步操作后execCommand会失效
document.getElementById('copyBtn').addEventListener('click', () => {
  // 先请求短链
  fetch('/api/getShortLink')
    .then(res => res.json())
    .then(data => {
      const shortLink = data.url;
      // 这时候想复制？晚了！事件循环都跑好几圈了
      // execCommand会返回false，或者直接报错
      copyWithExecCommand(shortLink);
    });
});

咋整？要么你先请求好存起来，要么你用个隐藏的input先占着位置，要么…干脆换Clipboard API。

还有个坑是选中文本范围选不对。有时候页面上本来就有用户选中的文字，你创建textarea复制完，用户的选区被你搞没了，体验极差。而且如果你复制的内容里有特殊字符，比如emoji，有时候会出现乱码，因为textarea的编码处理有点迷。

// 改良版execCommand，处理了一些边界情况
function improvedExecCommandCopy(text) {
  // 保存当前选区，后面恢复
  const selection = window.getSelection();
  const savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
  
  const textarea = document.createElement('textarea');
  textarea.value = text;
  
  // iOS Safari的特殊处理：不能真的丢到很远
  textarea.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  `;
  
  document.body.appendChild(textarea);
  
  // iOS需要setSelectionRange而不是简单的select()
  if (navigator.userAgent.match(/ipad|iphone/i)) {
    const range = document.createRange();
    range.selectNodeContents(textarea);
    selection.removeAllRanges();
    selection.addRange(range);
    textarea.setSelectionRange(0, 999999);
  } else {
    textarea.select();
  }
  
  let result = false;
  try {
    result = document.execCommand('copy');
  } catch (e) {
    console.error('复制命令执行失败:', e);
  }
  
  // 清理
  document.body.removeChild(textarea);
  
  // 恢复之前的选区，做个有素质的代码
  if (savedRange) {
    selection.removeAllRanges();
    selection.addRange(savedRange);
  }
  
  return result;
}

Clipboard API 也没那么香

再说那个新宠Clipboard API，async/await写起来是真爽，功能也强大，能写文本能写图片，甚至还能富文本。但是！它要求必须是HTTPS环境，还得用户明确授权，稍微不注意就报错Permission denied，直接让你原地裂开。

而且你发现没有，这货在安卓微信内置浏览器里表现特别诡异。有时候能调起来，有时候没反应，有时候复制了但粘贴出来是空的。因为微信内置浏览器对权限管控很严，而且它的内核版本分布极其混乱，有的基于X5，有的基于系统WebView，根本摸不清规律。

// 处理富文本复制的进阶玩法
async function copyRichContent(text, html) {
  try {
    // 构造ClipboardItem，可以同时存纯文本和HTML格式
    const blobText = new Blob([text], { type: 'text/plain' });
    const blobHtml = new Blob([html], { type: 'text/html' });
    
    const clipboardItem = new ClipboardItem({
      'text/plain': blobText,
      'text/html': blobHtml
    });
    
    await navigator.clipboard.write([clipboardItem]);
    console.log('富文本复制成功');
    return true;
  } catch (err) {
    console.error('富文本复制失败:', err);
    // 降级为纯文本
    return copyWithClipboardAPI(text);
  }
}

// 使用场景：复制一段带格式的内容
copyRichContent(
  '纯文本版本',
  '<b>加粗的HTML版本</b>'
);

还有个更恶心的：复制图片。这玩意儿得转成Blob对象，还得处理各种MIME类型，稍不留神就复制了个寂寞。

// 复制图片到剪贴板，这坑我踩了整整一天
async function copyImageToClipboard(imageUrl) {
  try {
    // 先fetch图片转成blob
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    
    // 构造ClipboardItem
    const item = new ClipboardItem({
      [blob.type]: blob
    });
    
    await navigator.clipboard.write([item]);
    return true;
  } catch (err) {
    console.error('图片复制失败:', err);
    
    // 如果直接复制blob不行，试试转成canvas再弄
    try {
      return await copyImageFallback(imageUrl);
    } catch (e) {
      return false;
    }
  }
}

// 备用方案：用canvas中转
async function copyImageFallback(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 处理跨域，但服务器得配合
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      
      canvas.toBlob(async (blob) => {
        try {
          const item = new ClipboardItem({ 'image/png': blob });
          await navigator.clipboard.write([item]);
          resolve(true);
        } catch (e) {
          reject(e);
        }
      }, 'image/png');
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}

这俩货到底谁更香

老办法胜在稳，只要不是那种变态的安卓定制ROM，基本都能跑，代码写起来也不用考虑异步，适合那种老旧项目或者对兼容性要求极高的H5活动页。你想啊，做个抽奖活动，用户可能还在用五年前的红米手机，你用新API直接白屏，老板不骂死你？

新办法胜在强，能处理复杂数据，代码逻辑清晰，不阻塞主线程，是未来的趋势。但你要是在http环境下跑，或者遇到某些奇葩浏览器，新办法直接歇菜。

所以啊，别无脑吹新，也别死守旧，得看菜下饭。我的建议是：先用新的，不行再降级。这就是传说中的渐进增强。

// 终极兼容方案：先尝试现代API，不行就降级
async function smartCopy(text) {
  // 先试试现代API
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);
      return { success: true, method: 'clipboard-api' };
    } catch (err) {
      console.log('现代API失败，准备降级:', err);
    }
  }
  
  // 降级到老方法
  const result = improvedExecCommandCopy(text);
  return { 
    success: result, 
    method: result ? 'execCommand' : 'none' 
  };
}

// 带回调的版本，方便你做埋点统计
async function copyWithTracking(text, onSuccess, onFail) {
  const startTime = Date.now();
  const result = await smartCopy(text);
  const duration = Date.now() - startTime;
  
  // 上报复制成功率，方便监控
  reportAnalytics('copy_action', {
    success: result.success,
    method: result.method,
    duration: duration,
    userAgent: navigator.userAgent.substring(0, 100) // 太长了截断一下
  });
  
  if (result.success) {
    onSuccess?.(result.method);
  } else {
    onFail?.();
  }
  
  return result.success;
}

真实项目里怎么落地

来点干货。假设你在做一个"邀请好友得红包"的活动页，用户点一下"复制链接"就要把带参数的链接甩出去。这时候你得先判断环境，如果是iOS微信内置浏览器，可能得调微信JSSDK；如果是普通Chrome，试试Clipboard API；如果都不行，再降级到execCommand。

// 实战代码：活动页复制邀请链接
class InviteLinkCopier {
  constructor(options) {
    this.baseUrl = options.baseUrl || window.location.origin;
    this.apiEndpoint = options.apiEndpoint;
    this.onSuccess = options.onSuccess || this.defaultSuccess;
    this.onFail = options.onFail || this.defaultFail;
  }
  
  // 生成带用户ID的邀请链接
  async generateLink() {
    const userId = this.getUserId();
    try {
      // 请求短链服务
      const response = await fetch(this.apiEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, type: 'invite' })
      });
      const data = await response.json();
      return data.shortUrl || `${this.baseUrl}/invite?u=${userId}`;
    } catch (e) {
      // 接口挂了用兜底方案
      return `${this.baseUrl}/invite?u=${userId}&t=${Date.now()}`;
    }
  }
  
  // 核心复制逻辑
  async copy() {
    // 先显示loading，别让用户瞎点
    this.showLoading();
    
    try {
      const link = await this.generateLink();
      
      // 判断环境，选择策略
      const isWechat = /MicroMessenger/i.test(navigator.userAgent);
      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
      
      let success = false;
      
      if (isWechat && isIOS) {
        // iOS微信内置浏览器，用JSSDK更稳
        success = await this.copyWithJSSDK(link);
      } else {
        // 其他环境用通用方案
        success = await this.universalCopy(link);
      }
      
      if (success) {
        this.onSuccess(link);
      } else {
        // 终极兜底：弹框让用户手动复制
        this.manualCopyFallback(link);
      }
    } catch (error) {
      console.error('复制流程出错:', error);
      this.onFail(error);
    } finally {
      this.hideLoading();
    }
  }
  
  // 通用复制方案
  async universalCopy(text) {
    // 优先现代API
    if (navigator.clipboard && window.isSecureContext) {
      try {
        await navigator.clipboard.writeText(text);
        return true;
      } catch (e) {
        console.log('Clipboard API失败:', e);
      }
    }
    
    // 降级execCommand
    return improvedExecCommandCopy(text);
  }
  
  // 微信JSSDK方案
  copyWithJSSDK(text) {
    return new Promise((resolve) => {
      if (!window.wx) {
        resolve(false);
        return;
      }
      
      wx.ready(() => {
        wx.invoke('sendAppMessage', {
          title: '邀请你领红包',
          desc: '点击领取大额红包',
          link: text,
          imgUrl: 'https://example.com/redpack.png'
        }, (res) => {
          // 微信这个回调很迷，有时候成功也不触发
          // 所以咱们同时用备用方案
          this.universalCopy(text).then(resolve);
        });
      });
      
      // 5秒超时，别一直等着
      setTimeout(() => resolve(false), 5000);
    });
  }
  
  // 手动复制兜底
  manualCopyFallback(text) {
    // 弹个模态框，里面放input让用户自己选
    const modal = document.createElement('div');
    modal.innerHTML = `
      <div style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;">
        <div style="background:white;padding:20px;border-radius:8px;width:80%;max-width:300px;">
          <h3 style="margin:0 0 10px;">长按复制链接</h3>
          <input value="${text}" readonly style="width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;" onclick="this.select()">
          <button onclick="this.closest('.copy-modal').remove()" style="margin-top:10px;width:100%;padding:10px;background:#07c160;color:white;border:none;border-radius:4px;">关闭</button>
        </div>
      </div>
    `;
    modal.className = 'copy-modal';
    document.body.appendChild(modal);
    
    // 自动选中input内容
    const input = modal.querySelector('input');
    input.select();
    input.setSelectionRange(0, 99999); // 移动端兼容
  }
  
  showLoading() {
    // 实现你的loading逻辑
    console.log('复制中...');
  }
  
  hideLoading() {
    console.log('复制结束');
  }
  
  defaultSuccess(link) {
    // 别用alert，用个漂亮的Toast
    const toast = document.createElement('div');
    toast.textContent = '链接已复制，快去分享吧！';
    toast.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 12px 24px;
      border-radius: 24px;
      z-index: 10000;
      font-size: 14px;
      animation: fadeIn 0.3s ease;
    `;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2000);
  }
  
  defaultFail(error) {
    console.error('复制失败:', error);
  }
  
  getUserId() {
    // 从你的登录态里取
    return localStorage.getItem('userId') || 'unknown';
  }
}

// 使用
const copier = new InviteLinkCopier({
  apiEndpoint: '/api/shortlink',
  onSuccess: (link) => {
    console.log('复制成功:', link);
    // 这里可以加点激励，比如放个烟花动画
  }
});

document.getElementById('inviteBtn').addEventListener('click', () => {
  copier.copy();
});

还有个场景是复制图片，这玩意儿更恶心，得转成Blob对象，还得处理各种MIME类型，稍不留神就复制了个寂寞。上面代码里已经展示了，但真实项目里你还得考虑跨域、图片加载失败、超大图片压缩等问题。

// 图片复制的完整解决方案，包含各种边界处理
class ImageCopier {
  constructor(options = {}) {
    this.maxSize = options.maxSize || 5 * 1024 * 1024; // 默认5MB
    this.quality = options.quality || 0.8;
  }
  
  async copy(imageSource) {
    try {
      let blob;
      
      // 支持URL、File对象、Blob、Base64
      if (typeof imageSource === 'string') {
        if (imageSource.startsWith('data:image')) {
          // Base64直接转
          blob = this.base64ToBlob(imageSource);
        } else {
          // URL需要fetch
          blob = await this.urlToBlob(imageSource);
        }
      } else if (imageSource instanceof File || imageSource instanceof Blob) {
        blob = imageSource;
      } else {
        throw new Error('不支持的图片格式');
      }
      
      // 检查大小，太大了压缩
      if (blob.size > this.maxSize) {
        blob = await this.compressImage(blob);
      }
      
      // 构造ClipboardItem
      const item = new ClipboardItem({
        [blob.type]: blob
      });
      
      await navigator.clipboard.write([item]);
      return { success: true, size: blob.size };
      
    } catch (error) {
      console.error('图片复制失败:', error);
      return { success: false, error: error.message };
    }
  }
  
  base64ToBlob(base64) {
    const parts = base64.split(';base64,');
    const contentType = parts[0].split(':')[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    
    return new Blob([uInt8Array], { type: contentType });
  }
  
  async urlToBlob(url) {
    const response = await fetch(url, {
      mode: 'cors', // 需要服务器支持CORS
      credentials: 'same-origin'
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.blob();
  }
  
  async compressImage(blob) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      const url = URL.createObjectURL(blob);
      
      img.onload = () => {
        URL.revokeObjectURL(url);
        
        // 计算压缩后的尺寸
        let { width, height } = img;
        const maxDimension = 1920; // 最大边长
        
        if (width > maxDimension || height > maxDimension) {
          if (width > height) {
            height = Math.round(height * maxDimension / width);
            width = maxDimension;
          } else {
            width = Math.round(width * maxDimension / height);
            height = maxDimension;
          }
        }
        
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        
        // 白色背景，防止透明PNG变黑
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, width, height);
        ctx.drawImage(img, 0, 0, width, height);
        
        canvas.toBlob((newBlob) => {
          if (newBlob) {
            resolve(newBlob);
          } else {
            reject(new Error('Canvas转Blob失败'));
          }
        }, 'image/jpeg', this.quality);
      };
      
      img.onerror = () => {
        URL.revokeObjectURL(url);
        reject(new Error('图片加载失败'));
      };
      
      img.src = url;
    });
  }
}

出事了该怎么救场

最怕的就是用户反馈"复制不了"。这时候别慌，先打开控制台看报错。

常见错误诊断

NotAllowedError：多半是权限没给或者不在HTTPS下，也可能是用户没交互就直接调用了。这货很敏感，必须是由用户点击事件直接触发的，中间不能隔异步操作。

SecurityError：肯定是你还在用http，或者iframe的sandbox限制。赶紧上HTTPS，现在免费的SSL证书多的是。

SyntaxError：可能是数据格式不对，比如给ClipboardItem传了错误的数据类型。

TypeError: Cannot read property ‘writeText’ of undefined：浏览器不支持，直接走降级方案。

// 完善的错误处理和用户提示
async function robustCopy(text, context = {}) {
  const errors = [];
  
  // 第一层：Clipboard API
  if (navigator.clipboard) {
    try {
      // 确保在安全上下文
      if (!window.isSecureContext) {
        throw new Error('不在安全上下文');
      }
      
      await navigator.clipboard.writeText(text);
      return { success: true, method: 'clipboard-api' };
    } catch (e) {
      errors.push({ method: 'clipboard-api', error: e.message });
    }
  }
  
  // 第二层：execCommand
  try {
    const result = improvedExecCommandCopy(text);
    if (result) {
      return { success: true, method: 'execCommand' };
    }
    errors.push({ method: 'execCommand', error: '返回false' });
  } catch (e) {
    errors.push({ method: 'execCommand', error: e.message });
  }
  
  // 第三层：iOS特殊处理
  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
    try {
      const result = iosSpecialCopy(text);
      if (result) {
        return { success: true, method: 'ios-special' };
      }
    } catch (e) {
      errors.push({ method: 'ios-special', error: e.message });
    }
  }
  
  // 都失败了，记录日志
  console.error('所有复制方案均失败:', errors);
  
  // 上报错误，方便排查
  if (context.reportError) {
    fetch('/api/log/client-error', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        type: 'copy_failed',
        errors,
        userAgent: navigator.userAgent,
        url: window.location.href,
        timestamp: new Date().toISOString()
      })
    }).catch(() => {}); // 上报失败不管了
  }
  
  return { 
    success: false, 
    errors,
    suggestion: '请长按内容手动复制'
  };
}

// iOS的特殊处理，因为iOS Safari的execCommand特别矫情
function iosSpecialCopy(text) {
  const range = document.createRange();
  const selection = window.getSelection();
  
  const el = document.createElement('div');
  el.textContent = text;
  el.style.cssText = `
    position: fixed;
    left: -9999px;
    top: 0;
    white-space: pre;
  `;
  
  document.body.appendChild(el);
  range.selectNodeContents(el);
  selection.removeAllRanges();
  selection.addRange(range);
  
  let result = false;
  try {
    result = document.execCommand('copy');
  } catch (e) {}
  
  document.body.removeChild(el);
  selection.removeAllRanges();
  
  return result;
}

还有个绝招，就是搞个隐藏的textarea，把内容塞进去，选中，执行复制，虽然土，但真的管用。记得一定要加fallback逻辑，万一API挂了，立马切回老办法，别让页面白屏或者没反应。

几个让老板夸你的骚操作

要想体验好，细节得抠。比如复制成功后，别只弹个alert说"复制成功"，太丑了！搞个Toast提示，两秒后自动消失，顺便带个震动反馈，手感瞬间提升。

// 优雅的Toast提示 + 震动反馈
function showToast(message, options = {}) {
  const {
    duration = 2000,
    vibrate = true,
    position = 'center'
  } = options;
  
  // 震动反馈，只有支持的设备才会震
  if (vibrate && navigator.vibrate) {
    navigator.vibrate(50); // 轻震50ms，别太猛
  }
  
  // 创建Toast元素
  const toast = document.createElement('div');
  toast.textContent = message;
  toast.style.cssText = `
    position: fixed;
    ${position === 'top' ? 'top: 20%;' : position === 'bottom' ? 'bottom: 20%;' : 'top: 50%; transform: translateY(-50%);'}
    left: 50%;
    transform: translateX(-50%) ${position === 'center' ? 'translateY(-50%)' : ''};
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    max-width: 80%;
    text-align: center;
    line-height: 1.4;
  `;
  
  document.body.appendChild(toast);
  
  // 触发动画
  requestAnimationFrame(() => {
    toast.style.opacity = '1';
  });
  
  // 自动消失
  setTimeout(() => {
    toast.style.opacity = '0';
    setTimeout(() => toast.remove(), 300);
  }, duration);
  
  return toast;
}

// 使用
document.getElementById('copyBtn').addEventListener('click', async () => {
  const result = await robustCopy('要复制的内容');
  if (result.success) {
    showToast('已复制到剪贴板，去分享吧！', { 
      vibrate: true,
      position: 'center'
    });
  } else {
    showToast('复制失败，请手动长按复制', { 
      vibrate: false, // 失败就别震了，怪吓人的
      position: 'bottom'
    });
  }
});

还有，按钮点击后加个防抖，别让用户狂点把浏览器搞崩了。

// 防抖处理，防止疯狂点击
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 或者更狠一点，直接禁用按钮一段时间
function createCopyButton(element, copyFunc) {
  let isCopying = false;
  
  element.addEventListener('click', async () => {
    if (isCopying) return;
    
    isCopying = true;
    element.style.opacity = '0.6';
    element.style.pointerEvents = 'none';
    
    try {
      await copyFunc();
    } finally {
      // 至少禁用500ms，防止手贱
      setTimeout(() => {
        isCopying = false;
        element.style.opacity = '1';
        element.style.pointerEvents = 'auto';
      }, 500);
    }
  });
}

如果是长文本，复制前最好截断一下，或者给用户一个"已复制，去粘贴吧"的心理暗示。

// 长文本处理，带预览
async function copyLongText(text, maxPreviewLength = 50) {
  const preview = text.length > maxPreviewLength 
    ? text.substring(0, maxPreviewLength) + '...' 
    : text;
  
  const result = await robustCopy(text);
  
  if (result.success) {
    showToast(`已复制: "${preview}"`, { duration: 3000 });
  }
  
  return result;
}

对了，别忘了在安卓某些机型上，输入法可能会弹出来遮挡提示，得想办法把它压下去。

// 处理输入法遮挡问题
function hideKeyboard() {
  // 让当前焦点元素失焦
  if (document.activeElement && document.activeElement.blur) {
    document.activeElement.blur();
  }
  
  // 如果是输入框，失焦后键盘会自动收起
  document.body.focus();
}

// 复制前先把键盘收了
document.getElementById('copyBtn').addEventListener('click', async () => {
  hideKeyboard(); // 先收键盘
  
  // 稍微延迟一下，等键盘完全收起
  await new Promise(resolve => setTimeout(resolve, 100));
  
  await copyLongText(document.getElementById('content').value);
});

最后唠两句心里话

其实吧，这复制功能看着小，真做起来全是坑。有时候你觉得代码完美无缺，结果在某个十年前的安卓机上直接趴窝。所以啊，做前端就得有颗大心脏，随时准备着跟浏览器的奇葩行为斗智斗勇。

我见过最离谱的bug是啥？是某个国产安卓机的系统浏览器，execCommand返回true，表示复制成功，用户粘贴的时候却是空白。调试了三天才发现，那破浏览器必须让textarea在视口内停留至少100ms才能真的写进剪贴板。你说这谁想得到？

所以我的经验是：

1. 永远不要相信浏览器的返回值，execCommand说成功了不一定真成功了，最好让用户能手动兜底。

2. 多备几套方案，现代API、execCommand、手动选择、甚至二维码分享，总有一款适合用户的破手机。

3. 埋点很重要，复制成功率、失败原因、用户设备分布，这些数据能帮你快速定位问题。

4. 真机测试不能省，Chrome模拟器和真机完全是两个世界，特别是安卓碎片化那么严重。

下次再遇到这种需求，别急着抄代码，先想想你的用户都在用什么破手机，然后再决定是用新API还是请出老祖宗。毕竟，能让用户在那台卡顿的手机上顺利复制出链接，才是真的牛逼，对吧？

而且你发现没有，前端这活儿就是这样，表面上看着是写代码，实际上是在和各种奇奇怪怪的环境打交道。今天这个浏览器抽风，明天那个系统升级搞事情，咱们就像是在打地鼠，刚按下去一个又冒出来一个。但这就是前端的魅力所在，永远有挑战，永远有惊喜（吓）。

所以啊，保持好奇心，保持耐心，保持那颗想砸电脑的心但手别真的砸下去。毕竟，解决了这些坑之后，那种成就感还是挺爽的。就像今天这个复制功能，等你把它调教得服服帖帖，在各种破手机上都能跑通的时候，你会发现自己对这个破浏览器的理解又深了一层。

好了，今天就聊到这儿。代码都在上面了，直接拿去用，有问题回来找我对线。记得点个赞，下次有坑我还来填！

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！