如何快速获取文本复制菜单？获取紧凑型菜单的指南

IOS

2024-03-24 05:44:45

如何获取紧凑型文本复制菜单

前言：
在当今数字化的世界中，我们经常需要复制文本。虽然有许多方法可以复制文本，但针对纯文本列表项的紧凑型复制菜单却鲜为人知。本文将指导您如何在点击纯文本列表项后获取此紧凑型菜单，从而轻松复制文本。

问题：
某些纯文本列表项不提供内置的复制功能，使得复制文本变得困难和耗时。在点击列表项时出现一个紧凑型菜单，其中包含一个复制按钮，可以轻松解决此问题。

解决方案：

使用 JavaScript 和 CSS 创建紧凑型复制菜单：

JavaScript 函数：
编写一个 JavaScript 函数来处理点击事件，复制文本并显示紧凑型复制菜单。
事件侦听器：
在列表项上添加单击事件侦听器，以便在点击时触发 JavaScript 函数。
隐藏复制按钮：
默认情况下，隐藏复制按钮。
悬停时显示复制按钮：
当列表项被悬停时，显示复制按钮。
复制按钮样式：
添加样式以自定义复制按钮的外观。

代码示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  function copyText(event) {
    // 获取被点击的列表项的文本内容。
    const text = event.target.textContent;

    // 创建一个新的文本区域元素，用于复制文本。
    const textarea = document.createElement('textarea');

    // 设置文本区域的内容为要复制的文本。
    textarea.value = text;

    // 添加文本区域到页面中。
    document.body.appendChild(textarea);

    // 选择文本区域中的文本。
    textarea.select();

    // 复制选中的文本到剪贴板。
    document.execCommand('copy');

    // 从页面中删除文本区域。
    document.body.removeChild(textarea);
  }

  const listItems = document.querySelectorAll('li');
  for (const item of listItems) {
    item.addEventListener('click', copyText);
  }
</script>

<style>
  li {
    cursor: pointer;
  }

  .copy-button {
    display: none;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  li:hover .copy-button {
    display: inline-block;
  }
</style>