如何实现点击按钮复制链接到剪贴板并弹出「Link Copied」提示？

你原本的按钮样式不需要做任何调整，核心要做三件事：阻止a标签默认跳转、提取href属性的链接值写入剪贴板、触发提示逻辑。

1. 微调原有HTML代码 #

只需要给按钮加一个唯一标识方便JS定位，其他类名、样式完全保留你原来的设置：

<a href="http://google.com" class="videotabsbutton w-button" id="copyLinkBtn">Copy</a>

2. 编写对应的交互逻辑 #

用现在主流浏览器兼容的Clipboard API实现复制，比老旧的execCommand方案稳定性更好，全程不需要额外依赖：

// 定位到你的按钮元素
const copyButton = document.getElementById('copyLinkBtn');

copyButton.addEventListener('click', async (event) => {
  // 必须加这行：阻止a标签默认的跳转行为，不然点完直接离开当前页
  event.preventDefault();
  // 直接从按钮元素上取需要复制的链接，不需要硬编码重复写一遍地址
  const targetLink = copyButton.href;

  try {
    // 把链接写入系统剪贴板
    await navigator.clipboard.writeText(targetLink);
    // 弹出提示
    alert('Link Copied');
  } catch (error) {
    // 做个兜底提示，遇到剪贴板权限拦截的时候给用户反馈
    alert('复制失败，请检查浏览器剪贴板权限后重试');
  }
});

如果觉得原生alert的样式太生硬，完全可以把alert那行替换成你自己页面里的浮层提示组件调用，不影响核心复制逻辑的运行。

新手容易踩的小坑 #

• 千万不要漏写event.preventDefault()，不然还没等复制逻辑跑完，页面就直接跳转到按钮指向的网址了
• 剪贴板API属于浏览器敏感权限，测试的时候需要在HTTPS环境或者本地localhost路径下打开页面，直接打开本地html文件可能会被浏览器拦截权限，这不是代码的问题
• 不想给按钮加id也可以，直接通过类名定位元素就行，比如用document.querySelector('.videotabsbutton.w-button')拿到按钮对象，效果完全一致

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