怎样在JavaScript中实现复制到剪贴板？

在Web开发中，复制到剪贴板是一个很常见的功能需求，比如电商平台的订单号复制、工具类网站的内容分享复制等场景都会用到。下面我们就来详细介绍几种在JavaScript中实现复制到剪贴板的方法。

方法一：使用Clipboard API（推荐）

Clipboard API是现代浏览器提供的原生接口，专门用于操作剪贴板，使用起来非常简单，而且支持异步操作，是目前最推荐的实现方式。

基础使用示例

我们可以通过navigator.clipboard.writeText()方法直接将文本写入剪贴板，该方法返回一个Promise，方便我们处理成功或失败的情况。

// 要复制的文本内容
const textToCopy = '这是需要复制到剪贴板的文本';

// 复制函数
function copyText() {
  // 调用Clipboard API的writeText方法
  navigator.clipboard.writeText(textToCopy)
    .then(() => {
      console.log('文本复制成功');
      alert('复制成功');
    })
    .catch((err) => {
      console.error('复制失败:', err);
      alert('复制失败，请手动复制');
    });
}

结合页面元素使用

实际开发中，我们通常需要复制页面上某个元素的内容，比如输入框或者段落里的文本，只需要先获取对应元素的文本值再调用API即可。

// 获取页面上的输入框元素
const inputElement = document.getElementById('copy-input');
// 获取复制按钮元素
const copyBtn = document.getElementById('copy-btn');

copyBtn.addEventListener('click', () => {
  // 获取输入框的当前值
  const text = inputElement.value;
  // 调用API复制文本
  navigator.clipboard.writeText(text)
    .then(() => {
      alert('已复制输入框内容到剪贴板');
    })
    .catch((err) => {
      console.error('复制失败:', err);
    });
});

方法二：使用document.execCommand（兼容旧浏览器）

在Clipboard API普及之前，开发者常用document.execCommand('copy')来实现复制功能，不过这个方法已经被标准废弃，仅在需要兼容非常旧的浏览器时使用。

使用这个方法需要先选中要复制的文本，然后执行复制命令，步骤如下：

• 创建一个临时的可输入元素（比如input或者textarea）
• 将要复制的文本赋值给这个元素
• 选中元素里的文本内容
• 执行document.execCommand('copy')命令
• 移除临时创建的元素

function copyTextOld(text) {
  // 创建临时的textarea元素
  const textarea = document.createElement('textarea');
  // 设置元素的值为要复制的文本
  textarea.value = text;
  // 让元素不可见
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  // 将元素添加到页面中
  document.body.appendChild(textarea);
  // 选中textarea里的文本
  textarea.select();
  try {
    // 执行复制命令
    const success = document.execCommand('copy');
    if (success) {
      alert('复制成功');
    } else {
      alert('复制失败');
    }
  } catch (err) {
    console.error('复制出错:', err);
  }
  // 移除临时元素
  document.body.removeChild(textarea);
}

两种方法的对比

我们可以通过下面的表格直观看到两种实现方式的区别：

注意事项

使用Clipboard API时需要注意，部分浏览器要求该方法必须在用户主动交互的上下文中调用，比如点击按钮的事件回调里，不能在页面加载完成后直接调用，否则会报错。

如果项目需要兼容IE浏览器，那么只能选择document.execCommand的方式，不过现在IE的市场占有率已经非常低，大部分项目都可以直接使用Clipboard API。

注意：不要在用户无感知的情况下自动复制内容到剪贴板，这会侵犯用户的操作权限，也不符合浏览器的安全规范，所有复制操作都应该由用户主动触发。

以上就是JavaScript中实现复制到剪贴板的全部内容，开发者可以根据项目的浏览器兼容需求选择合适的实现方式，优先推荐使用Clipboard API，代码更简洁，维护也更方便。

JavaScript复制到剪贴板Clipboard_APIdocument.execCommand修改时间：2026-05-29 23:38:33