JavaScript无缝复制“td”元素内容及视觉反馈实现详解

javascript

2024-03-13 10:01:36

如何在 JavaScript 中无缝复制和显示“td”元素的内容

概述

在现代网络体验中，让用户轻松复制网页上的信息至关重要。本文将引导你使用 JavaScript 实现这一功能，并通过超时向用户提供已复制内容的视觉反馈。

实现步骤

获取“td”元素

首先，获取页面中所有“td”元素，通常包含你需要复制的文本。使用 document.querySelectorAll("td") 获取这些元素。

创建复制功能

为每个“td”元素添加一个事件监听器，以便在点击时触发复制功能。该功能包括以下步骤：

获取目标“td”元素的文本内容。
使用 navigator.clipboard.writeText() 将文本复制到剪贴板。
选择目标“td”元素的文本，以便用户可以立即看到已复制的内容。

显示已复制的内容

为了让用户确认已复制的内容，我们将使用超时创建一个临时通知：

创建一个元素（如 <div>）来显示已复制的内容。
将已复制的内容作为元素的文本。
使用 CSS 定位元素并设置适当的样式。
使用 setTimeout() 函数在指定的时间后隐藏元素。

示例代码

以下是演示上述步骤的示例代码：

// 获取“td”元素
const tdElements = document.querySelectorAll("td");

// 创建复制功能
tdElements.forEach((td) => {
  td.addEventListener("click", (event) => {
    // 获取文本内容
    const text = event.target.innerText;

    // 复制到剪贴板
    navigator.clipboard.writeText(text);

    // 选择文本
    const range = document.createRange();
    range.selectNode(td);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    // 显示已复制的内容
    const notification = document.createElement("div");
    notification.innerText = `已复制：${text}`;

    // 样式和定位
    notification.style.position = "fixed";
    notification.style.top = "0";
    notification.style.left = "0";
    notification.style.padding = "1rem";
    notification.style.backgroundColor = "#000";
    notification.style.color = "#fff";

    // 添加到页面
    document.body.appendChild(notification);

    // 超时隐藏
    setTimeout(() => {
      notification.remove();
    }, 1000);
  });
});