点击复制按钮脚本恢复原文本时丢失Font Awesome图标，求修复方案

问题根源 #

你当前的代码用textContent保存和恢复按钮内容，但textContent只会提取元素里的纯文本，完全忽略<i class="fab fa-battle-net"></i>这类HTML标签。所以3秒后恢复的只有“Battle.net”或“Xbox”文字，图标直接丢失。

修复步骤 #

把保存和恢复按钮内容的方式从textContent换成innerHTML，innerHTML会完整保留按钮里的所有HTML结构（包括图标标签）。

修改后的JavaScript代码 #

function copyToClipboard(elementId, thisButton) {
  // 用innerHTML保存完整的按钮内容（含图标标签）
  let oldContent = thisButton.innerHTML;
  // 设置临时提示文本
  thisButton.innerHTML = '!Copied!';
  // 3秒后恢复原内容
  setTimeout(function() { 
    thisButton.innerHTML = oldContent; 
  }, 3000);

  // 复制逻辑优化：用textContent获取纯文本ID，避免意外复制HTML标签
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).textContent);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  console.log("🎉 Copied to clipboard!");
  document.body.removeChild(aux);
}

完整代码示例 #

HTML

<p id="battlenet-id">gameid#26737</p>
<p id="xbox-id">gameid#5423</p>

<li><a href="javascript:void(0);" class="link-st battlenet" onclick="copyToClipboard('battlenet-id', this)"><i class="fab fa-battle-net"></i> Battle.net</a></li>
<li><a href="javascript:void(0);" class="link-st xbox" onclick="copyToClipboard('xbox-id', this);"><i class="fa-brands fa-xbox"></i> Xbox</a></li>

JavaScript

function copyToClipboard(elementId, thisButton) {
  let oldContent = thisButton.innerHTML;
  thisButton.innerHTML = '!Copied!';
  setTimeout(function() { 
    thisButton.innerHTML = oldContent; 
  }, 3000);

  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).textContent);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  console.log("🎉 Copied to clipboard!");
  document.body.removeChild(aux);
}

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