如何用jQuery实现点击带datavalue类元素将其值复制到剪贴板？

目标DOM结构 #

待处理的页面元素基础结构如下：

<div>
  <h4>IDM</h4>
  <hr />
  <dl class="dl-horizontal">
    <dt>
            FirstName
        </dt>

    <dd class="datavalue">
      John
    </dd>

    <dt>
            SecondName
        </dt>

    <dd class="datavalue">
      Baxter
    </dd>

    <dt>
            DBrith
        </dt>

    <dd class="datavalue">
      12/25/1982
    </dd>
  </dl>
</div>

可落地实现方案 #

通过jQuery事件委托绑定点击逻辑，自动提取元素内的纯文本内容，优先走现代剪贴板API完成复制，针对非安全上下文（HTTP环境、旧浏览器）做降级兼容，同时加轻量的操作反馈，避免用户点击后无感知。

完整实现代码 #

// 事件委托绑定所有.datavalue元素的点击事件，支持动态加载的新元素
$(document).on('click', '.datavalue', function() {
  // 提取元素文本，清理代码缩进、换行带来的多余空白
  const targetText = $(this).text().trim();

  // 现代浏览器优先使用Clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(targetText)
      .then(() => showCopyToast('复制成功'))
      .catch(() => legacyCopy(targetText));
  } else {
    // 降级兼容旧环境
    legacyCopy(targetText);
  }
});

// 旧环境降级复制逻辑
function legacyCopy(text) {
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = text;
  // 临时元素移出可视区，避免页面闪烁
  tempTextarea.style.cssText = 'position:fixed;left:-9999px;top:0;';
  document.body.appendChild(tempTextarea);

  tempTextarea.select();
  try {
    const isCopySuccess = document.execCommand('copy');
    isCopySuccess ? showCopyToast('复制成功') : showCopyToast('复制失败，请手动选择文本');
  } catch (err) {
    showCopyToast('当前浏览器不支持自动复制');
  }
  // 销毁临时元素
  document.body.removeChild(tempTextarea);
}

// 简易复制提示，无需引入第三方UI库
function showCopyToast(message) {
  // 移除已有提示避免重复堆积
  document.querySelector('.copy-toast')?.remove();

  const toastEl = document.createElement('div');
  toastEl.className = 'copy-toast';
  toastEl.textContent = message;
  toastEl.style.cssText = 'position:fixed;top:24px;left:50%;transform:translateX(-50%);padding:8px 16px;background:rgba(0,0,0,0.8);color:#fff;border-radius:4px;z-index:9999;';
  document.body.appendChild(toastEl);

  // 1.5秒后自动消失提示
  setTimeout(() => toastEl.remove(), 1500);
}

关键注意点 #

• 用事件委托而非直接给每个.datavalue绑定事件，后续页面动态新增的同类型元素不需要重复绑定，自动生效
• 提取文本时主动做trim()处理，解决原HTML结构里代码缩进、换行带来的多余空白，避免复制的内容格式混乱
• 现代剪贴板API要求页面处于安全上下文（HTTPS、本地localhost），HTTP环境下会自动切换到兼容旧浏览器的降级方案
• 加了轻量的操作反馈提示，解决用户点击后不知道是否复制成功的体验问题

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