我H5复制功能怎么被微信的复制粘贴覆盖了？

问题背景

当我先在微信内复制内容A，再在H5页面调用复制功能复制内容B，跳转至外部应用粘贴时，仍然会粘贴出A。

？？？

一开始代码自测我直接复制然后粘贴，一点问题都没有，测试这么测，我也是没想到，更是没想到一个复制功能还会暗藏玄机。

查了下才知道，这是因为iOS环境下，必须要用户自己选中文字来复制粘贴，所以需要代码模拟文字选中的过程。而这是基于iOS系统对剪贴板操作的严格安全限制。

解决方案概述

需要针对iOS环境进行特殊处理，绕过微信的剪贴板缓存机制，确保复制内容的准确性。

实现代码

export const handleCopyText = (text: string): Promise<boolean> => {
  return new Promise((resolve) => {
    // 检测iOS环境
    const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    
    try {
      const textString = text.toString();
      const input = document.createElement('input');
      input.id = 'copy-input';
      input.readOnly = true;
      input.style.position = 'fixed';
      input.style.opacity = '0';
      input.style.pointerEvents = 'none';
      input.style.zIndex = '-1000';
      document.body.appendChild(input);
      input.value = textString;
      
      // iOS特殊处理
      if (isiOS) {
        // 创建一个临时的可见元素来获取焦点
        const focusTrap = document.createElement('div');
        focusTrap.contentEditable = 'true';
        focusTrap.style.position = 'fixed';
        focusTrap.style.top = '0';
        focusTrap.style.left = '0';
        focusTrap.style.width = '100%';
        focusTrap.style.height = '100%';
        focusTrap.style.zIndex = '9999';
        document.body.appendChild(focusTrap);
        
        // 先聚焦到临时元素
        focusTrap.focus();
        
        // 延迟执行复制操作，给UI线程时间处理焦点变化
        setTimeout(() => {
          selectText(input, 0, textString.length);
          
          // 尝试复制
          const copyResult = document.execCommand('copy');
          
          // 清理DOM
          document.body.removeChild(focusTrap);
          input.blur();
          document.body.removeChild(input);
          
          resolve(copyResult);
        }, 100);
      } else {
        // 非iOS环境使用标准流程
        selectText(input, 0, textString.length);
        
        const copyResult = document.execCommand('copy');
        
        input.blur();
        document.body.removeChild(input);
        
        resolve(copyResult);
      }
    } catch (error) {
      console.error('复制失败:', error);
      resolve(false);
    }
    
    function selectText(textBox: HTMLInputElement, startIndex: number, stopIndex: number) {
      if ((textBox as any).createTextRange) {
        const range = (textBox as any).createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);
        range.moveEnd('character', stopIndex - startIndex);
        range.select();
      } else {
        textBox.setSelectionRange(startIndex, stopIndex);
        textBox.focus();
      }
    }
  });
};

关键技术点

1. 环境检测

   • 通过User-Agent检测iOS设备，针对不同环境应用不同策略

2. DOM元素处理

   • 创建隐藏的input元素用于复制操作
   • 使用fixed定位确保元素在视口中，避免滚动问题
   • 设置opacity: 0和pointerEvents: none确保元素不可见且不干扰用户交互

3. iOS特殊处理

   • 创建临时可编辑div(focusTrap)获取焦点，解决iOS焦点限制
   • 使用setTimeout添加延迟，给UI线程足够时间处理焦点变化
   • 实现专门的文本选择逻辑，兼容不同浏览器的选择API

4. 文本选择优化

   • 针对IE浏览器使用createTextRange方法
   • 针对现代浏览器使用setSelectionRange方法
   • 确保文本被正确选中，为复制操作做准备

5. 错误处理

   • 使用try-catch捕获可能的异常
   • 始终返回Promise，确保调用方可以一致地处理结果

使用方法

// 在用户点击事件中调用
copyButton.addEventListener('click', async () => {
  const success = await handleCopyText('需要复制的内容');
  if (success) {
    alert('复制成功');
  } else {
    alert('复制失败，请手动复制');
  }
});

注意事项

1. 确保复制操作由用户明确的交互事件（如click）触发，iOS对非用户触发的剪贴板操作限制更严格

2. 在iOS微信环境中，即使实现了此方案，仍可能存在极少数情况下复制失败，建议提供友好的用户提示

3. 对于特别复杂的场景，可以考虑提供备用方案：显示文本内容并提示用户手动复制