js复制文本的实现

JavaScript 复制文本的实现方法

使用 Clipboard API（现代浏览器推荐）

async function copyTextToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('无法复制文本: ', err);
  }
}

调用方式：

copyTextToClipboard('要复制的文本内容');

使用 document.execCommand（兼容旧浏览器）

function copyTextFallback(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log('复制文本' + msg);
  } catch (err) {
    console.error('无法复制文本: ', err);
  }

  document.body.removeChild(textarea);
}

综合解决方案

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

注意事项

• 某些浏览器可能要求在用户交互事件（如点击）中触发复制操作
• Safari 浏览器对剪贴板访问有特殊限制
• HTTPS 环境下 Clipboard API 更可靠
• 考虑添加复制成功/失败的UI反馈

示例：按钮点击复制

<button onclick="copyText('示例文本')">复制文本</button>
<p id="status"></p>

<script>
function copyText(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      document.getElementById('status').textContent = '复制成功！';
    })
    .catch(err => {
      document.getElementById('status').textContent = '复制失败: ' + err;
    });
}
</script>

高级功能扩展

// 复制当前页面URL
function copyCurrentURL() {
  copyText(window.location.href);
}

// 复制特定元素内容
function copyElementText(id) {
  const text = document.getElementById(id).innerText;
  copyText(text);
}