使用JavaScript实现移动端与桌面端通用的文本复制到剪贴板功能

原有代码移动端失效核心原因 #

• 部分移动端低版本浏览器不支持navigator.clipboard API
• navigator.clipboard仅支持在HTTPS/localhost这类安全上下文环境下运行，HTTP环境下会直接失效
• 缺少异常捕获和兼容降级逻辑，API不可用时没有备用方案兜底

修复后可全端兼容的完整代码 #

HTML代码 #

<input type="text" value="Hello World" id="myInput" readonly>
<button onclick="myFunction()">Copy text</button>

如果不需要input在页面显示，可以给input加样式隐藏，注意不要用display:none，会导致无法聚焦：

#myInput {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
}

JS代码 #

function myFunction() {
  const copyTextDom = document.getElementById("myInput");
  const targetText = copyTextDom.value;

  // 优先使用现代标准Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(targetText)
      .then(() => {
        alert("Copied the text: " + targetText);
      })
      .catch(() => {
        // API调用失败时自动走降级方案
        fallbackCopy(targetText);
      });
  } else {
    // 不支持Clipboard API的环境直接走降级方案
    fallbackCopy(targetText);
  }
}

// 兼容旧浏览器的降级复制方案
function fallbackCopy(text) {
  const copyTextDom = document.getElementById("myInput");
  // 先主动聚焦确保移动端可以正常选中内容
  copyTextDom.focus();
  copyTextDom.select();
  copyTextDom.setSelectionRange(0, text.length);

  try {
    const copyResult = document.execCommand('copy');
    if (copyResult) {
      alert("Copied the text: " + text);
    } else {
      alert("复制失败，请手动复制内容");
    }
  } catch (error) {
    alert("复制失败，请手动复制内容");
  }

  // 复制完成后清除选中状态
  window.getSelection().removeAllRanges();
}

核心优化点 #

• 新增API能力判断和安全上下文判断，优先使用标准API，兼容场景自动降级
• 新增降级方案document.execCommand('copy')覆盖不支持新API的移动端设备
• 主动触发DOM聚焦，解决部分移动端浏览器无法选中文本的问题
• 新增错误捕获逻辑，避免复制失败时报错影响页面正常运行

内容的提问来源于stack exchange，提问作者Raki Pandaga