如何在同一页面中创建多个CLICK TO COPY点击复制功能实例

问题根源 #

你的代码依赖全局唯一ID实现元素查找，而HTML规范要求同一页面内ID属性不可重复。当你多实例复用代码时，重复的myInput、myTooltipID会导致document.getElementById永远只返回页面中第一个匹配的元素，因此永远只能复制第一个实例的文本。

改造方案 #

我们放弃全局ID绑定，改为基于触发事件的元素做相对DOM查找，实现多实例完全独立，新增实例仅需修改input的value值即可。

改造后的完整代码 #

HTML部分（单实例模板，需要多少个就复制多少份，仅修改input的value值即可）

<!-- 单个复制实例 开始 -->
<div class="copy-block">
  <p><strong>NOTE:</strong> Ensure you properly copy text:</p>
  <input type="text" value="这里替换为你要复制的自定义文本" class="copy-input" readonly><br><br>
  <div class="tooltip">
    <button onclick="myFunction(this)" onmouseout="outFunc(this)">
      <span class="tooltiptext">Copy to clipboard</span>
      Copy Address
    </button>
  </div>
</div>
<!-- 单个复制实例 结束 -->

JS部分（全局只需要写一次，不需要随实例重复添加）

function myFunction(triggerBtn) {
  // 查找当前实例对应的输入框
  const copyBlock = triggerBtn.closest('.copy-block');
  const copyInput = copyBlock.querySelector('.copy-input');
  // 执行复制逻辑
  copyInput.select();
  copyInput.setSelectionRange(0, 99999);
  document.execCommand("copy");
  // 更新当前按钮的提示文案
  const tooltip = triggerBtn.querySelector('.tooltiptext');
  tooltip.innerHTML = "Copied: ";
}

function outFunc(triggerBtn) {
  const tooltip = triggerBtn.querySelector('.tooltiptext');
  tooltip.innerHTML = "Copy to clipboard";
}

现代浏览器兼容优化（可选） #

目前document.execCommand已经被官方弃用，你可以改用标准Clipboard API实现更稳定的复制功能，只需修改myFunction即可：

async function myFunction(triggerBtn) {
  const copyBlock = triggerBtn.closest('.copy-block');
  const copyText = copyBlock.querySelector('.copy-input').value;
  // 调用现代剪贴板API
  await navigator.clipboard.writeText(copyText);
  // 更新提示文案
  const tooltip = triggerBtn.querySelector('.tooltiptext');
  tooltip.innerHTML = "Copied: ";
}

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