JavaScript中如何复制文本到剪贴板？

在前端开发中，复制文本到剪贴板是常见需求，比如复制优惠码、订单号、分享链接等场景都需要用到这个功能。本文将介绍JavaScript实现剪贴板复制的两种主流方案，以及对应的实现方法和注意事项。

方案一：使用Document.execCommand方法

这是比较传统的实现方式，兼容性较好，支持大部分旧版本浏览器，不过现在已经被官方标记为废弃，但在需要兼容旧环境时仍然可以使用。

实现步骤

• 创建一个隐藏的可编辑元素，比如textarea或者input
• 将要复制的文本赋值给这个元素的value属性
• 将元素添加到文档中，选中元素内容
• 调用document.execCommand('copy')执行复制命令
• 移除创建的元素，完成复制操作

代码示例

// 复制文本到剪贴板（基于execCommand）
function copyTextByExecCommand(text) {
  // 创建隐藏的textarea元素
  const textarea = document.createElement('textarea');
  // 设置文本内容
  textarea.value = text;
  // 避免元素影响页面布局
  textarea.style.position = 'fixed';
  textarea.style.top = '-9999px';
  textarea.style.left = '-9999px';
  // 将元素添加到页面
  document.body.appendChild(textarea);
  // 选中textarea中的内容
  textarea.select();
  // 执行复制命令
  let isSuccess = false;
  try {
    isSuccess = document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }
  // 移除创建的元素
  document.body.removeChild(textarea);
  return isSuccess;
}

// 使用示例
const textToCopy = '这是要复制的文本内容';
const copyResult = copyTextByExecCommand(textToCopy);
if (copyResult) {
  console.log('复制成功');
} else {
  console.log('复制失败');
}

注意事项

• 该方法必须在用户触发的事件回调中调用，比如click事件，否则会被浏览器拦截
• 部分浏览器可能不支持该方法，需要做降级处理
• 已经被官方废弃，后续可能会被浏览器移除支持

方案二：使用Clipboard API

这是现代浏览器推荐使用的剪贴板操作API，属于异步API，使用更规范，功能也更强大，不过兼容性相对较差，不支持旧版本浏览器。

实现步骤

• 调用navigator.clipboard.writeText方法，传入要复制的文本
• 该方法返回Promise，通过then和catch处理成功和失败的情况

代码示例

// 复制文本到剪贴板（基于Clipboard API）
async function copyTextByClipboardAPI(text) {
  // 检查浏览器是否支持Clipboard API
  if (!navigator.clipboard) {
    console.error('当前浏览器不支持Clipboard API');
    return false;
  }
  try {
    // 调用writeText方法复制文本
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    return false;
  }
}

// 使用示例
const targetText = '这是要复制的文本内容';
copyTextByClipboardAPI(targetText);

注意事项

• 该方法同样需要在用户触发的事件中使用，否则会被浏览器拦截
• 仅在HTTPS环境下或者localhost、127.0.0.1等本地环境下可用，HTTP环境不支持
• 兼容性：Chrome 66+、Firefox 63+、Edge 79+支持，IE完全不支持

两种方案的选择建议

如果项目需要兼容IE或者旧版本浏览器，优先选择Document.execCommand方法；如果只需要支持现代浏览器，优先选择Clipboard API，代码更简洁，也符合未来的规范。

也可以做兼容处理，先尝试使用Clipboard API，如果失败再降级使用Document.execCommand方法，实现代码如下：

// 兼容两种方案的复制方法
async function copyText(text) {
  // 优先尝试Clipboard API
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      console.log('复制成功（Clipboard API）');
      return true;
    } catch (err) {
      console.log('Clipboard API复制失败，尝试降级方案');
    }
  }
  // 降级使用execCommand
  return copyTextByExecCommand(text);
}

常见问题说明

• 为什么复制操作必须在用户事件中触发？这是浏览器的安全策略，防止页面恶意自动复制内容到用户剪贴板，影响用户体验。
• 复制大段文本会不会有问题？两种方案都支持复制任意长度的文本，只要不超过浏览器的内存限制即可。
• 复制的内容可以包含换行吗？可以，textarea和Clipboard API都支持包含换行的文本内容，复制后换行格式会保留。

JavaScript剪贴板复制Clipboard_APIDocument.execCommandnavigator.clipboard修改时间：2026-05-29 22:43:21