使用jQuery实现URL复制功能时如何添加轻量复制成功通知效果

以下实现完全匹配你当前页面的技术栈（jQuery3.3.1、原生复制逻辑），不需要引入任何第三方插件或外部资源。

核心实现思路 #

• 通知组件纯CSS+jQuery实现，默认隐藏，通过固定定位悬浮在视口内，不占用文档流空间
• 仅在系统复制命令执行成功的分支触发通知，显示完成后自动延时淡出，不阻塞用户页面操作
• 通知固定展示文案为URL copied!，不需要动态传入实际复制的URL内容
• 增加定时器重置逻辑，避免用户连续多次点击复制按钮时，通知反复闪烁、提前消失

具体落地步骤 #

1. 编写匹配Bitly视觉效果的通知样式 #

将以下CSS加入页面全局样式表：

#copy-toast {
  position: fixed;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#copy-toast.toast-show {
  opacity: 1;
  visibility: visible;
}

这个样式还原了Bitly通知的核心特征：深色半透明背景、居中悬浮在页面中下部、圆角、软过渡效果。

2. 补充通知的基础DOM结构 #

在页面body标签末尾增加通知容器，提前写入固定提示文案：

<div id="copy-toast">URL copied!</div>

3. 对接现有复制逻辑，补全通知触发分支 #

在你原有绑定.clipboard类点击事件的代码中，定位到execCommand('copy')执行完成的位置，加入通知判断逻辑，适配后的完整代码参考：

$(function() {
  // 存储通知自动隐藏的定时器ID，避免重复触发逻辑错乱
  let toastHideTimer = null;

  // 原有.clipboard元素点击绑定逻辑
  $('.clipboard').on('click', function() {
    // 原有逻辑：读取元素data-ref上的目标URL
    const copyTargetUrl = $(this).data('ref');
    // 原有逻辑：创建临时输入框承载待复制内容
    const tempInput = $('<input>');
    tempInput.val(copyTargetUrl);
    $('body').append(tempInput);
    // 原有逻辑：选中输入框内的内容
    tempInput[0].select();

    // 原有逻辑：执行系统复制命令
    const copyStatus = document.execCommand('copy');
    // 原有逻辑：复制完成后移除临时输入框
    tempInput.remove();

    // 新增通知触发：仅在复制成功时弹出提示
    if (copyStatus) {
      // 清除上一次未执行的隐藏定时器
      clearTimeout(toastHideTimer);
      // 激活通知的显示状态
      $('#copy-toast').addClass('toast-show');
      // 1.5秒后自动隐藏通知
      toastHideTimer = setTimeout(() => {
        $('#copy-toast').removeClass('toast-show');
      }, 1500);
    }
  });
})

细节说明 #

• 通知设置了较高的z-index值，不会被页面内的固定导航、弹窗等上层组件遮挡
• 通知的显示/隐藏用透明度+可见性切换实现，不会触发页面整体布局重排，性能消耗极低
• 所有代码逻辑和jQuery3.3.1完全兼容，不存在版本适配问题

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