如何使用JavaScript或jQuery复制元素的data-copy-short-link属性值到剪贴板

你的需求很明确——点击div时把它的data-copy-short-link属性内容复制到剪贴板。之前的代码存在小问题：你获取到的shortLink是字符串值，不是DOM元素，所以不能调用.select()这类表单元素专属的方法。下面给你两种可行的实现方案：

方案一：使用jQuery + 现代浏览器剪贴板API #

这是最简洁的现代方案，推荐优先使用：

// 只给带有data-copy-short-link属性的div绑定点击事件
$("div[data-copy-short-link]").click(function() {
  // 获取当前元素的目标属性值
  const shortLink = $(this).attr("data-copy-short-link");
  
  // 调用浏览器剪贴板API复制文本
  navigator.clipboard.writeText(shortLink)
    .then(() => {
      // 复制成功提示（可根据需求自定义）
      alert("短链接已复制到剪贴板！");
    })
    .catch(err => {
      // 处理复制失败的情况，比如浏览器不支持或权限问题
      console.error("复制失败：", err);
    });
});

对应的HTML结构：

<div data-copy-short-link="http://example.com/xxx">点击复制短链接</div>

关键说明： #

• 用$("div[data-copy-short-link]")精准选择目标元素，避免误触发其他div的点击事件
• navigator.clipboard.writeText()是浏览器原生的剪贴板操作API，无需借助额外DOM元素
• 加入then()和catch()处理成功/失败场景，提升用户体验

方案二：兼容旧浏览器的 fallback 方案 #

如果需要兼容不支持navigator.clipboard的旧浏览器，可以通过创建临时textarea元素来实现：

$("div[data-copy-short-link]").click(function() {
  const shortLink = $(this).attr("data-copy-short-link");
  
  // 创建临时textarea用于复制
  const tempTextarea = $("<textarea>").val(shortLink).appendTo("body");
  
  // 选中textarea内容并执行复制
  tempTextarea.select();
  tempTextarea[0].setSelectionRange(0, 99999); // 适配移动端
  document.execCommand("copy");
  
  // 移除临时元素
  tempTextarea.remove();
  
  alert("短链接已复制！");
});

注意： #

document.execCommand("copy")已被标记为废弃，但目前仍能在多数旧浏览器中正常工作，仅作为备选方案使用。

原生JavaScript版本（无需jQuery） #

如果你不想依赖jQuery，这里也提供原生JS的实现：

// 获取所有带有目标属性的div元素
document.querySelectorAll("div[data-copy-short-link]").forEach(div => {
  div.addEventListener("click", function() {
    const shortLink = this.getAttribute("data-copy-short-link");
    
    navigator.clipboard.writeText(shortLink)
      .then(() => {
        alert("链接已复制！");
      })
      .catch(err => {
        console.error("复制出错：", err);
      });
  });
});

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