当前位置：首页 > JavaScript

js 复制实现

2026-04-06 01:07:42JavaScript

JavaScript 复制实现方法

方法1：使用 document.execCommand（已废弃但仍可用）

function copyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

该方法兼容旧浏览器，但已被现代标准标记为废弃。

方法2：使用 Clipboard API（现代推荐方式）

js 复制实现

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

需要 HTTPS 环境或 localhost 才能正常工作，返回 Promise 对象。

方法3：结合两种方法的兼容方案

js 复制实现

async function copyText(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      console.warn('Clipboard API 失败，降级处理');
    }
  }

  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();

  try {
    const success = document.execCommand('copy');
    document.body.removeChild(textarea);
    return success;
  } catch (err) {
    document.body.removeChild(textarea);
    return false;
  }
}

注意事项

现代浏览器要求复制操作必须由用户手势（如点击事件）触发
Safari 某些版本需要特殊处理
错误处理很重要，部分浏览器会限制剪贴板访问
移动端设备可能需要额外适配

扩展功能实现

// 复制DOM元素内容
function copyElementContent(selector) {
  const el = document.querySelector(selector);
  if (el) copyText(el.textContent || el.value);
}

// 带格式的HTML复制
async function copyHTML(html) {
  const blob = new Blob([html], {type: 'text/html'});
  const item = new ClipboardItem({'text/html': blob});
  await navigator.clipboard.write([item]);
}

以上方法可根据实际需求选择使用，推荐优先尝试 Clipboard API，再降级到传统方法。

标签: js