当前位置：首页 > HTML

h5实现复制

2026-03-06 13:01:32HTML

使用document.execCommand方法（已废弃但部分浏览器仍支持）

HTML5中早期可通过document.execCommand("copy")实现复制功能。创建一个隐藏的textarea或input元素，设置要复制的文本，选中内容后执行命令。

<button onclick="copyText()">复制文本</button>
<script>
function copyText() {
  const textarea = document.createElement('textarea');
  textarea.value = '要复制的文本';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}
</script>

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

现代浏览器推荐使用异步的Clipboard API，需检查浏览器兼容性并处理权限。调用navigator.clipboard.writeText()方法实现文本复制。

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

兼容性处理方案

针对不支持Clipboard API的旧浏览器，可结合两种方法实现降级兼容。先尝试现代API，失败时回退到execCommand。

function copyTextFallback(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).catch(() => {
      legacyCopy(text);
    });
  } else {
    legacyCopy(text);
  }
}

function legacyCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }
  document.body.removeChild(textarea);
}

添加用户反馈

复制操作后建议提供视觉反馈，例如显示临时提示信息。可通过CSS动画或Toast组件实现。

.copy-feedback {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  animation: fade 2s forwards;
}

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

function showFeedback() {
  const div = document.createElement('div');
  div.className = 'copy-feedback';
  div.textContent = '已复制';
  document.body.appendChild(div);
  setTimeout(() => {
    document.body.removeChild(div);
  }, 2000);
}