纯js实现点击按钮复制功能

前面给出的原生 JavaScript 实现点击按钮复制功能的方法中，需要动态创建一个 `<input>` 元素，这增加了一些不必要的代码量。下面我们介绍一种更为简洁的纯 JavaScript 实现方式，不需要创建 `<input>` 元素。

HTML 代码：

<button id="copy-btn" data-copy-text="要复制的内容">复制</button>

JavaScript 代码：

const copyBtn = document.querySelector('#copy-btn');
copyBtn.addEventListener('click', () => {
  const copyText = copyBtn.getAttribute('data-copy-text');
  const clipboardData = new ClipboardEvent('').clipboardData || new DataTransfer();
  clipboardData.setData('text/plain', copyText);
  document.dispatchEvent(new ClipboardEvent('copy', {clipboardData}));
  alert('已复制到剪贴板！');
});

当用户点击按钮时，JavaScript 会将要复制的文本内容设置到一个 `ClipboardEvent` 对象中，并通过 `document.dispatchEvent()` 方法触发 `copy` 事件。浏览器会自动将 `ClipboardEvent` 对象中的内容添加到剪贴板中。最后，通过 `alert()` 方法提示用户已完成复制操作。