HTML 点击复制到剪贴板 - JavaScript

在前端开发中，我们经常需要实现点击复制内容到剪贴板的功能，例如复制分享链接、复制验证码等。本篇文章将介绍如何使用 HTML 和 JavaScript 实现点击复制到剪贴板功能。

HTML

首先，我们需要在 HTML 中添加一个按钮和一个需要复制的文本框。

<button id="copyBtn">复制到剪贴板</button>
<input id="copyTarget" type="text" value="需要复制的内容">

在这个示例中，按钮的 ID 为 copyBtn，文本框的 ID 为 copyTarget。需要复制的内容为文本框的值。

JavaScript

接下来，我们将使用 JavaScript 实现点击按钮复制内容的功能。

const copyBtn = document.getElementById('copyBtn');
const copyTarget = document.getElementById('copyTarget');

copyBtn.addEventListener('click', function() {
  copyTarget.select();
  document.execCommand('copy');
});

首先，我们获取按钮和文本框的 DOM 对象。然后，在按钮上添加点击事件监听器。在点击事件中，我们使用文本框的 select 方法选中文本框内的内容。接着，使用 execCommand 方法执行复制命令将内容复制到剪贴板中。

Markdown

代码片段：

```html
<button id="copyBtn">复制到剪贴板</button>
<input id="copyTarget" type="text" value="需要复制的内容">

const copyBtn = document.getElementById('copyBtn');
const copyTarget = document.getElementById('copyTarget');

copyBtn.addEventListener('click', function() {
  copyTarget.select();
  document.execCommand('copy');
});

以上是 HTML 和 JavaScript 实现点击复制到剪贴板的示例。如果您需要增加其他功能，如复制图像等，请查阅相关资料。