如何实现点击非输入框文本（段落/无边框按钮等）复制到剪贴板并显示提示？

直接用navigator.clipboard.writeText() API就能实现无需输入框的文本复制，配合CSS伪元素实现点击提示框，以下是完整代码：

HTML结构 #

用普通文本元素即可，比如span或p，通过自定义属性存储提示文本：

<span class="copy-text" data-tooltip="复制成功！">点击复制这段示例文本</span>

CSS样式 #

实现默认隐藏的提示框，点击后激活显示：

.copy-text {
  position: relative;
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
  /* 如果用button的话，去掉边框和背景 */
  /* border: none; background: none; padding: 0; font: inherit; */
}

/* 提示框基础样式 */
.copy-text::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 点击后显示提示框 */
.copy-text.active::after {
  opacity: 1;
}

JavaScript逻辑 #

监听点击事件，调用剪贴板API完成复制，控制提示框的显示/隐藏：

const copyElement = document.querySelector('.copy-text');

copyElement.addEventListener('click', async () => {
  // 获取要复制的文本（如果是外部内容，可改为从data-copy属性读取：copyElement.dataset.copy）
  const targetText = copyElement.textContent.trim();

  try {
    // 复制文本到剪贴板
    await navigator.clipboard.writeText(targetText);
    
    // 显示成功提示
    copyElement.classList.add('active');
    
    // 2秒后自动隐藏提示
    setTimeout(() => copyElement.classList.remove('active'), 2000);
  } catch (error) {
    // 处理复制失败情况
    const originalTip = copyElement.getAttribute('data-tooltip');
    copyElement.setAttribute('data-tooltip', '复制失败，请重试');
    copyElement.classList.add('active');
    
    setTimeout(() => {
      copyElement.setAttribute('data-tooltip', originalTip);
      copyElement.classList.remove('active');
    }, 2000);
    console.error('复制出错:', error);
  }
});

额外说明 #

• 兼容性：navigator.clipboard支持Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+，覆盖所有主流浏览器。
• 灵活调整：可以把span换成button（去掉边框背景就是纯文本样式）、p等元素；提示框的位置、样式可通过CSS自定义；复制的内容也可以从元素的data-copy属性读取，无需和显示文本一致。

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