如何为JavaScript复制功能添加点击触发的鼠标旁'Copied!'提示动画

第一步：添加提示样式（CSS代码） #

.copy-toast {
  position: fixed;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none;
  z-index: 99999;
  animation: fadeInOut 2s ease forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

第二步：替换原有复制功能JS代码 #

function copy(e, that) {
  // 保留原有复制逻辑
  var inp = document.createElement('input');
  document.body.appendChild(inp);
  inp.value = that.textContent;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();

  // 新增Copied提示生成逻辑
  const toast = document.createElement('div');
  toast.className = 'copy-toast';
  toast.textContent = 'Copied!';
  // 定位到鼠标点击位置，加10px偏移避免遮挡指针
  toast.style.left = e.clientX + 10 + 'px';
  toast.style.top = e.clientY + 10 + 'px';
  document.body.appendChild(toast);

  // 2秒后自动移除提示元素
  setTimeout(() => {
    toast.remove();
  }, 2000);
}

第三步：修改点击触发的调用写法 #

<!-- 示例链接调用方式，需要传入event事件对象 -->
<a href="javascript:void(0)" onclick="copy(event, this)">你要复制的文本内容</a>

自定义调整说明 #

• 可修改CSS中.copy-toast的属性调整提示框的外观、字号、颜色等
• 可修改@keyframes的参数调整动画的运动轨迹和过渡效果
• 可调整JS代码中e.clientX + 10、e.clientY + 10的数值修改提示框和鼠标指针的相对位置
• 若要修改提示显示时长，需要同步修改CSS中动画总时长和JS中setTimeout的毫秒数

内容的提问来源于stack exchange，提问作者Shabih-ul-Hassan Raza