如何实现复制值后显示Bootstrap 5.3动态内容Popover？

实现步骤 #

• 初始化Bootstrap Popover并设置手动触发模式，避免和按钮点击事件冲突
• 在复制回调中根据结果动态生成Popover内容
• 添加自动隐藏逻辑，优化用户体验

修改后的完整代码 #

HTML部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<button class="btn btn-primary btn-copy" data-val="Copy">
  Copy Value
</button>

JavaScript部分 #

/**
 * 浏览器不支持直接操作剪贴板时的降级方案
 * 用于copyTextToClipboard函数
 */
function fallbackCopyTextToClipboard(text, callback) {
  var textArea = document.createElement("textarea");
  textArea.value = text;

  // 避免滚动到底部
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    if (successful) {
      callback(null, text);
    } else {
      callback("复制失败", text);
    }
    console.log('降级方案：复制命令执行' + msg);
  } catch (err) {
    callback(err, text);
    console.error('降级方案：复制失败', err);
  }

  document.body.removeChild(textArea);
}

/**
 * 复制文本到剪贴板
 */
function copyTextToClipboard(text, callback) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text, callback);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    callback(null, text);
    console.log('异步方案：复制成功！');
  }, function(err) {
    callback(err, text);
    console.error('异步方案：复制失败', err);
  });
}

$(document).ready(() => {
  // 初始化Popover，设置手动触发
  const popoverInstance = new bootstrap.Popover('.btn-copy', {
    trigger: 'manual',
    placement: 'top',
    html: true
  });

  $(".btn-copy").on("click", (e) => {
    const element = e.target;
    const text = $(element).data('val');

    copyTextToClipboard(text, (err, text) => {
      let popoverContent;
      if (err) {
        popoverContent = `<span class="text-danger">复制失败：${err}</span>`;
      } else {
        popoverContent = `<span class="text-success">已复制内容：${text}</span>`;
      }
      // 更新Popover内容
      popoverInstance.setContent({ '.popover-body': popoverContent });
      // 显示Popover
      popoverInstance.show();
      // 3秒后自动隐藏Popover
      setTimeout(() => {
        popoverInstance.hide();
      }, 3000);
    });
  });
})

关键说明 #

• 设置trigger: 'manual'让Popover完全由代码控制显示/隐藏，避免和按钮点击事件冲突
• 通过setContent方法动态更新内容，支持HTML格式，可根据复制结果展示不同样式
• 3秒自动隐藏逻辑无需用户手动操作，提升使用体验

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