Javascript 复制文本 onclick

在前端开发中，经常需要对用户提供复制功能，以便快速复制某些信息，例如链接、代码等等。本文介绍如何用Javascript实现一个点击复制文本的功能。

HTML代码

首先，在HTML中设置一个按钮，加上id属性用于在Javascript中获得该元素，加上onclick事件，调用Javascript的复制文本函数。

<button id="copy-btn" onclick="copyText()">复制文本</button>

Javascript代码

在Javascript中，需要实现一个copyText()函数，用于复制文本内容。我们使用了Javascript的API —— document.execCommand()和document.getSelection()，分别用于执行复制命令和选中文本。

function copyText() {
  const textToCopy = "这里是需要复制的文本";
  
  // 创建一个虚拟的textarea元素，并将需要复制的文本内容赋值给它
  const textarea = document.createElement('textarea');
  textarea.value = textToCopy;
  
  // 将虚拟的textarea元素添加到html中
  document.body.appendChild(textarea);
  
  // 选中textarea中的文本
  textarea.select();
  
  // 执行复制命令
  document.execCommand('copy');
  
  // 移除虚拟的textarea元素
  document.body.removeChild(textarea);
}

以上代码中，我们首先创建了一个虚拟的textarea元素，并将需要复制的文本内容赋值给它。然后将该元素添加到页面中，并选中元素中的文本。接着，调用document.execCommand()函数来执行复制命令，复制完成后，移除虚拟元素。

Markdown代码

## Javascript 复制文本 onclick

在前端开发中，经常需要对用户提供复制功能，以便快速复制某些信息，例如链接、代码等等。本文介绍如何用Javascript实现一个点击复制文本的功能。

### HTML代码

首先，在HTML中设置一个按钮，加上id属性用于在Javascript中获得该元素，加上onclick事件，调用Javascript的复制文本函数。

```html
<button id="copy-btn" onclick="copyText()">复制文本</button>

Javascript代码

在Javascript中，需要实现一个copyText()函数，用于复制文本内容。我们使用了Javascript的API —— document.execCommand()和document.getSelection()，分别用于执行复制命令和选中文本。

function copyText() {
  const textToCopy = "这里是需要复制的文本";
  
  // 创建一个虚拟的textarea元素，并将需要复制的文本内容赋值给它
  const textarea = document.createElement('textarea');
  textarea.value = textToCopy;
  
  // 将虚拟的textarea元素添加到html中
  document.body.appendChild(textarea);
  
  // 选中textarea中的文本
  textarea.select();
  
  // 执行复制命令
  document.execCommand('copy');
  
  // 移除虚拟的textarea元素
  document.body.removeChild(textarea);
}

以上代码中，我们首先创建了一个虚拟的textarea元素，并将需要复制的文本内容赋值给它。然后将该元素添加到页面中，并选中元素中的文本。接着，调用document.execCommand()函数来执行复制命令，复制完成后，移除虚拟元素。