如何实现从data-title属性复制文本到剪贴板？

原生JavaScript实现（推荐） #

可以通过点击按钮或元素本身触发复制操作，以下是两种常见场景：

1. 按钮触发复制

先给页面添加触发按钮和目标元素：

<h3 class="project discord" data-title="test1234">
  <i class='bx bx-fw bx-tada-hover bxl-discord-alt'></i>Discord
</h3>
<button onclick="copyDataTitle()">复制data-title内容</button>

然后编写复制函数：

function copyDataTitle() {
  const target = document.querySelector('.project.discord');
  // 检查data-title是否存在且不为空
  if (target?.dataset.title) {
    navigator.clipboard.writeText(target.dataset.title)
      .then(() => alert('复制成功！'))
      .catch(err => console.error('复制失败:', err));
  } else {
    alert('无可用的data-title内容');
  }
}

2. 点击目标元素直接复制

如果希望点击h3元素本身就复制内容：

const target = document.querySelector('.project.discord');
if (target?.dataset.title) {
  target.addEventListener('click', () => {
    navigator.clipboard.writeText(target.dataset.title)
      .then(() => {
        // 添加视觉反馈，比如临时变色
        target.style.color = '#2ecc71';
        setTimeout(() => target.style.color = '', 1200);
      })
      .catch(err => console.error('复制出错:', err));
  });
}

注意事项 #

• 现代浏览器推荐使用navigator.clipboard API，该API需要在HTTPS环境或localhost下运行
• 若需兼容旧浏览器，可降级使用已弃用的document.execCommand('copy')方法，示例如下：

function copyLegacy() {
  const target = document.querySelector('.project.discord');
  if (target?.dataset.title) {
    const textArea = document.createElement('textarea');
    textArea.value = target.dataset.title;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    alert('复制成功！');
  }
}

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