复制粘贴原来这么简单！！

在这份学习文档中，将介绍两种实现复制功能的方法：一种是使用 JavaScript 自定义方法，另一种是使用现代浏览器提供的 navigator.clipboard.writeText 方法。我们将会对这两种方法进行简要的介绍和比较。 超级简单！！快冲

简单粗暴的实现

我们将使用 JavaScript 来编写一个简单的复制功能。这个功能将包含以下步骤：

1. 创建一个隐藏的文本框来容纳需要复制的文本。
2. 执行复制操作。
3. 在点击按钮时触发复制操作。

import './App.css';

function App() {
  // 定义一个自执行函数，用于处理复制操作
  (function h_copy(FN_NAME: string) {
    // 尝试执行复制命令
    function execCommandCopy(): boolean {
      let succeeded: boolean;
      try {
        succeeded = document.execCommand('copy');
      } catch (err) {
        succeeded = false;
      }
      return succeeded;
    }

    // 添加事件监听器
    function addEvent(
      obj: any,
      evtype: string,
      fn: EventListenerOrEventListenerObject,
      useCapture?: boolean,
    ) {
      if (obj.addEventListener) {
        obj.addEventListener(evtype, fn, useCapture);
      } else {
        obj.attachEvent('on' + evtype, fn);
      }
    }

    // 将文本复制到剪贴板中
    function _H_copy(text: string, callback?: (result: boolean) => void) {
      // 创建一个隐藏的文本框，相当于我们的“复制器”
      const textArea = document.createElement('textarea');
      // 将要复制的文本放进去
      textArea.value = text;
      // 把它藏在幕后，不要影响我们的布局
      textArea.style.position = 'fixed';
      // 把“复制器”插入到页面中
      document.body.appendChild(textArea);
      // 让它获得焦点
      textArea.focus();
      // 选中文本
      textArea.select();
      const result = execCommandCopy();
      //移除该节点
      textArea.remove();
      callback && callback(result);
    }

    let copying = false;
    let copyTest = '';

    // 复制文本到剪贴板
    function copy(test: string) {
      copying = true;
      copyTest = test;
    }

    // 添加点击事件监听器
    addEvent(document, 'click', function () {
      if (copying) {
        _H_copy(decodeURIComponent(copyTest), (result) => {
          copying = false;
        });
      }
    });

    // 将 copy 函数绑定到全局对象 window 上
    window[FN_NAME] = copy;
  })('h_copy');

  return (
    // 渲染一个按钮，点击按钮触发复制操作
    <button
      onClick={() => {
        alert('复制成功');
        return window.h_copy(
          '第一行需要复制的内容\r\n第二行需要复制的内容\r\n第三行需要复制的内容',
        );
      }}
    >
      点击复制
    </button>
  );
}

export default App;

在线demo

使用 navigator.clipboard.writeText 方法实现复制功能

另一种实现复制功能的方法是使用现代浏览器提供的 navigator.clipboard.writeText 方法。这个方法提供了一个更简洁和可靠的方式来执行复制操作。

// 点击按钮后，调用 navigator.clipboard.writeText 将文本复制到剪贴板
const handleClick = () => {
  const textToCopy = '需要复制的文本内容';
  navigator.clipboard.writeText(textToCopy)
    .then(() => {
      alert('复制成功');
    })
    .catch((err) => {
      console.error('复制失败:', err);
      alert('复制失败，请手动复制文本');
    });
};

navigator.clipboard 是一个对象，它提供了对浏览器剪贴板的访问和控制。

属性

• navigator.clipboard.readText: 一个异步方法，用于从剪贴板中读取文本内容。
• navigator.clipboard.read: 一个异步方法，用于从剪贴板中读取数据。

方法

• navigator.clipboard.writeText(text: string): Promise<void> : 一个异步方法，用于将指定的文本内容写入到剪贴板中，并返回一个 Promise 对象。
• navigator.clipboard.write(data: ClipboardItem[]): Promise<void> : 一个异步方法，用于将数据写入到剪贴板中，并返回一个 Promise 对象。数据参数是一个数组，每个元素都是一个 ClipboardItem 对象。

注意事项

• navigator.clipboard 对象的某些方法可能受到浏览器安全策略的限制，特别是在没有用户交互的情况下执行复制操作可能会被浏览器阻止。
• 在某些浏览器中，对 navigator.clipboard 的访问可能需要在安全上下文（例如 HTTPS 网站）中才能生效。

方法比较

• 自定义方法：可以在大多数情况下正常工作，不同的浏览器对 execCommand('copy') 方法的支持程度不同，可能导致在某些浏览器中无法正常工作。
• navigator.clipboard.writeText 方法：提供了一种现代且更可靠的方式来执行复制操作，并且具有更好的移动设备支持。

结论

综上所述，尽管自定义方法在某些情况下可能会有用，但我们建议在可行的情况下使用 navigator.clipboard.writeText 方法来实现复制功能。这样可以提高用户体验，并确保在各种设备和浏览器中的可靠性。

希望这些信息对你有所帮助！如有其他问题，请随时提出~