如何用JavaScript实现文本复制到剪贴板？附相关HTML及JS代码片段

嘿，基于你提供的HTML结构，这里是完整且优化后的copyText函数实现，兼顾现代浏览器兼容性和用户体验：

完整JavaScript代码 #

function copyText(textToCopyId) {
  // 先确认目标元素存在，避免报错
  const targetElement = document.getElementById(textToCopyId);
  if (!targetElement) {
    console.error("找不到ID为" + textToCopyId + "的元素");
    return;
  }
  // 获取元素文本并去除两端空白
  const copyText = targetElement.textContent.trim();

  // 优先使用现代浏览器的Clipboard API（更安全高效）
  navigator.clipboard.writeText(copyText)
    .then(() => {
      // 复制成功，给用户视觉反馈
      showCopyFeedback(targetElement.closest('.server-ip').querySelector('.copy-text'));
    })
    .catch(err => {
      // Clipboard API不可用时，降级到传统方法
      console.error('Clipboard API调用失败，使用降级方案:', err);
      const tempTextarea = document.createElement('textarea');
      tempTextarea.value = copyText;
      // 把临时textarea放到视野外，不影响页面布局
      tempTextarea.style.position = 'absolute';
      tempTextarea.style.left = '-9999px';
      document.body.appendChild(tempTextarea);
      // 选中并执行复制
      tempTextarea.select();
      document.execCommand('copy');
      // 清理临时元素
      document.body.removeChild(tempTextarea);
      // 同样显示反馈
      showCopyFeedback(targetElement.closest('.server-ip').querySelector('.copy-text'));
    });
}

// 封装复制反馈函数，避免重复代码
function showCopyFeedback(copyTextElement) {
  const originalContent = copyTextElement.innerHTML;
  copyTextElement.innerHTML = '<i class="ion-checkmark"></i> Copied!';
  // 2秒后恢复原文本
  setTimeout(() => {
    copyTextElement.innerHTML = originalContent;
  }, 2000);
}

代码说明 #

• 兼容性处理：优先使用现代浏览器推荐的navigator.clipboard.writeText API，当该API不可用时（比如旧版浏览器或无HTTPS环境），自动降级到传统的临时文本框复制方案，保证功能可用。
• 错误预防：先检查目标元素是否存在，避免因ID写错导致的控制台报错。
• 用户体验优化：复制成功后会把按钮文本改成"Copied!"并显示对勾图标，2秒后恢复原样，让用户明确知道复制操作完成。
• 文本清理：使用trim()去除文本两端的多余空白，避免复制到不必要的空格。

你的现有HTML结构不需要修改，onclick="copyText('serv-1')"的调用方式完全适配这个函数。

内容的提问来源于stack exchange，提问作者Jadasdas