当前位置：首页 > HTML

h5实现复制

2026-01-16 16:43:24HTML

使用document.execCommand方法（已弃用但广泛兼容）

H5中可通过document.execCommand('copy')实现复制功能。需先选中文本内容：

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

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

使用Clipboard API（现代推荐方案）

Navigator.clipboard.writeText()是新的标准API：

h5实现复制

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

注意：需在安全上下文（HTTPS或localhost）中使用，某些浏览器可能要求用户先触发交互事件。

结合Selection API处理复杂内容

需要复制非纯文本内容时，可结合Range和Selection：

h5实现复制

function copyHTML(elementId) {
  const range = document.createRange();
  range.selectNode(document.getElementById(elementId));
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
}

处理权限问题

部分浏览器需要用户手势触发：

button.addEventListener('click', () => {
  navigator.clipboard.writeText('要复制的文本')
    .then(() => alert('已复制'))
    .catch(() => alert('请手动复制'));
});

兼容性处理方案

可结合两种方案实现降级兼容：

async function copyWithFallback(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}